반응형

IT/HTML

html 기본 태그정리

● 제목태그 : ~ 까지 있으며 h1은 페이지에 하나만 존재한다. ● div : division의 약자로 레이아웃(웹사이트 틀)을 만들때 주로 사용한다. 웹페이지에서 논리적 구분을 정의하는 태그이며 블록을 알맞게 배치하고 width값, height값을 정해줄 수 있다. ● p(paragraph) : block요소며 긴 글을 단락에 따라 나눌때 사용한다. ● span : inline속성으로 div와 달리 width값, height값을 정해줄수 없다. 보통 중요단어에 사용하나 필요에 따라 사용 할 수 있다. ● pre : 공백을 살려주는 태그 (줄바꿈 적용됨) ​ ​ ● 항목태그 · ul : (unordered List) > li: 순서가 없다. · ol : (ordered List) > li: 순서가있다...

2019.12.11 게시됨

IT/HTML

웹접근성1탄

웹접근성(폭넓은) · 장애우를 위한 사용 할 수 있게 하는 것 · hover를 사용하면 focus도 같이사용하는것이 좋다. · tab키를 index로 줘야한다. · alt태그 사용만해도 웹접근성을 지킬수있다. ▶ 이미지같은경우 alt값으로 처리해주거나 내용이 많을경우 ul,li로 만들어 blind처리해주고 alt="하단참고"라고 해준다. ★blind 처리방법은 css게시판을 참고하세요★ ​ 1)온라인 서식과 웹표준/웹접근성 ▶ 온라인 서식 코딩시 웹표준 및 웹접근성을 준수하는 코딩은 각 서식에 label의 for와 name, title 속성을 부여하는 것이다. ▶ 또한 label for와 id로 연결되기에 둘의 값은 일치시켜야한다. ▶ 한편,온라인서식 코딩시 웹표준/웹접근성을 고려해야하는 서식의 종류는 ..

2019.12.11 게시됨

IT/HTML

html이란?

html(hyper Text Markup Language) 이란 무엇일까? - 웹에서 웹에 맞는 형식인 *.html(또는 *.html)로 문서를 저장해야 한다. - 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시 할 수 있어야한다. - 웹에서 자유롭게 오갈수 있는 웹문서를 만드는 언어가 html - 하이퍼텍스트(Hyper Text) : 웹사이트에서 일크를 클릭해 다른 문서나 사이트를 즉시 이동할수 있는 기능 - 마크업(mark up) : 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느부분이 사진이고 링크인지 표시하는것을 말한다. - 하이퍼텍스트 + 마크업 -> 웹에서 자유롭게 오고갈수있는 웹문서를 만드는 언어 - 꺽세를 항상 닫아준다. - html문서(웹문서)는 파일 ..

2019.12.11 게시됨

IT/CSS

float 속성

레이아웃을 정렬하는 방법에대해 알아볼까합니다. 좌우 정렬을 위한 속성으로는 세가지가 있는데요. 첫번째, 이번글의 주제인 float입니다. 두번째, inline-block이 있고요. 세번째, flex가 있습니다. 이 셋 모두 css에서 좌우정렬이나 배치를 할 수 있는 속성입니다. 그중 제가 현재 가장 많이 사용하고 있는 float에 대해 설명할까 합니다. float는 레이아웃 정렬을 위해 제가 가장 많이 사용하는 속성인데요 속성 값으로 lfet(왼쪽띄움);right(오른쪽띄움);none(기본) 이 있습니다. 사용방법 안녕하세요 반갑습니다 - 예제 https://codepen.io/seozzz/pen/yLBRWqE 이렇게 좌우정렬이 되는데요 여기서 반드시 whidth 값이 존재해야 합니다. 그리고 주의할 점..

2019.12.11 게시됨

IT/CSS

ie 호환방법

ie10까지는 css3가 잘 적용됩니다. 하지만 9부터는 망가지기 시작하는데요. ​ 첫번째 방법은 아래와 같이 @midia를 따로 사용하여 각각의 css를 적용합니다. /*ie9/ie10 */ @media screen and (min-width:0\0) { span{width:15px;} } /* ie8/ie9/ie10 */ @media screen\0 { span{width:15px;} }/ie7/ie6 */ @media \0screen\,screen\9 { span{width:15px;} } /* ie8 */ @media \0screen { span{width:15px;} } /* ie6/7이하 */ @media screen\9{ span{width:15px;} } 두번째 방법으로는 밑에와 같이 이용..

2019.12.11 게시됨

IT/CSS

css 원하는 부분 선택자

#1,4,7,10.... .boards_cont ul li:nth-child(-3n + 4 ) #4,7,10.... .boards_cont ul li:nth-child(3n + 4 ) #홀수선택 .boards_cont ul li:nth-child(even) #짝수선택 .boards_cont ul li:nth-child(odd) .boards_cont ul li:nth-child(2n) #4번째 부터 .boards_cont ul li:nth-child(n+4) #1번째 부터 19번째까지 .boards_cont ul li:nth-child(-n+18) #4번째 부터 19번째까지 .boards_cont ul li:nth-child(n+4):nth-child(-n+19) #2의 배수 .boards_cont ul..

2019.12.11 게시됨

반응형