html css (4) 썸네일형 리스트형 Semantic tag 의미별로 정리할 수 있게 만들어주는 태그들. 형태를 구축해서 만들어주는 태그 div와의 차이점: - semantic tag는 브라우저나 유저의 검색을 했을때 유저들이나 사용자들이 더 잘 구별할 수 있게, 내용을 찾을수 있도록 도와줌. - 공통적으로 규칙을 정한 것. - 개발자 도구등을 통해서 의미들을 인식할 수 있는 경우가 많음. Semantic tag의 구조 header - 머리말, 헤더 nav - 메뉴를 묶거나 메뉴를 담을때 사용 section - 내용물 / 단락나눔, 주제별 사용 - 제목태그와 단락을 나누어 표현하는 경우가 많음 article - 기사라는 뜻 / 세부적인 단락 나눔 / 웹상의 내용을 작성 aside - 링크, 광고, 사이드 배치 footer - 웹하단 저작권,연락처 웹사이트의 세부정보 background - image background-image: url(img/art.jpg); /* 배경이미지 불러오는 속성 url을 나타내는 속성, 반복되는 성격을 가지고 있다. 배경 이미지 두장을 겹치는 예시 ,로 구분지어서 배경이미지를 두장이상 적용할 수 있다. 먼저 작성한 이미지가 상단에 위치한다. */ /* background-image: url(img/cat_bg.png), url(img/land.png);*/ background-repeat /* no-repeat 원래는 이미지가 반복되는데, 반복되지 않고 한장만 볼수 있게 만듬. repeat-x x축-가로로만 반복됨. repeat-y y축-세로로만 반복 */ background-repeat: no-repeat; /* 가로 세로 비율 사이즈, cover: 꽉 차면서 가로 .. 7/13 css 선택자 css에서는 전체 선택자, 태그 선택자, id class 선택자들 외에도 다양한 선택자들을 사용할 수 있음. 이외의 선택자: 후손선택자 / 자손선택자 - 후손선택자의 경우 해당 요소의 하위요소에 있는 특정한 요소를 모두 선택하는 역활을 한다. 예를들어, 선택자 a가 있다 치면 한칸 띄어쓰고 선택자 b (예시 a b{}) 표현 - 자손선택자는 해당 요소의 바로 밑에 위치하는 요소를 특정해 선택하는 역활을 한다. 예를 들어 선택자 a > 선택자 b (예시 a>b{}) 바로 밑의 요소만 선택 가능. 태그가 길고 클래스가 많을때 사용하기 편해 유용함. 동위선택자: 동위관계에 있는 요소중에 해당요소보다 뒤에 존재하는 특정한 요소를 선택할 때 사용 - 선택자A+선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선.. 7/6 Display 속성 Display 속성 요소의 성격을 설정, 보여주는 속성 * block: 박스와 같이 쌓이는 성격을 가지고 있음. 화면 전체폭을 사용하는 특성을 가지고 있음. (ex> div, p, table 태그 등) 꽉 차게 나타남, 모든 css element 적용 * inline: 글자와 같이 나열되는 성격을 이야기 하면서도 내용물에 따라 폭이 결정되는 성격을 가지고 있음. (a, span, i, em) 옆으로 글자에 따라서 나타남, 일부 css element만 적용됨. 사이즈 부여 관계없이, 글자 크기에 따라감. display 속성 box element에 display:inline시 inline 형태로 표출됨. inline element에 display:block시 block 형태로 표출됨. none: 그 div를.. 이전 1 다음
