본문 바로가기

HTML

[문제] color 속성의 상속 [문제] a 요소의 color 값이 blue 이고 backround-color 값은 white 이다. a 요소에 border-style과 border-width를 부여했지만 border-color 값을 지정하지 않았다면 a 요소의 border-color는 어떤 색으로 표시되는가? black blue white gray 정답은 2번이다. border-color 값을 선언하지 않는 경우 border-color 값은 color 값으로부터 상속 받습니다. a 요소의 color 값이 blue 이므로 border-color 값은 blue가 됩니다. border 속성은 위처럼 간략히 사용할 수 있다. 색상은 다양한 방법으로 지정할 수 있다. 다른 포스트에서 알아보겠다. 정찬명 dece24@gmail.com http:.. 더보기
header, footer, main header, footer header, footer 태그는 여러 번 사용할 수 있다. header, footer 태그는 페이지 전체 또는 특정 내용의 도입부와 맺음말 부분에 사용하는 의미를 가진다. header = 도입부 footer = 맺음말 Main main 태그는 콘텐츠의 본문 영역으로서 다른 페이지와 중복되는 내용은 포함하지 않도록 주의한다. main 태그는 한 페이지에 딱 한번만 사용할 수 있다. 그렇기 때문에 body 안에서 메인 콘텐츠임을 표시할 id나 class를 굳이 지정할 필요가 없다. 하나뿐이니깐. 더보기
nav, aside nav nav 요소는 사이트의 주된 탐색 링크 섹션을 의미한다. 메인 메뉴에 주로 사용된다. 보통 class명으로 'gnb(global navigation bar)'를 주로 사용한다. 메인 메뉴 아래 하위 메뉴는 'lnb(local navigation bar)'를 주로 사용한다. gnb > lnb aside aside 요소는 부수적인 섹션을 의미한다. 일반적으로 광고 영역 또는 지름길을 역할을 하는 영역이다. 더보기
id, class 선택자 태그 요소를 선택하는데 사용된다. id는 #id 형태로 사용한다. id는 문서 안에서 딱 한번만 사용할 수 있다. 같은 id는 반복해서 사용할 수 없다. class는 .class 형태로 사용한다. class는 여러 개의 태그 요소에 중복 사용 가능하다. 중복되거나 공통된 스타일 요소가 있을 때 사용하기 적합하다. 우선순위 id > class 주의할 점 id와 class는 하나의 태그 요소에 함께 사용 가능하다. 숫자로 시작할 수 없다. id는 URL로 사용 가능하다. 자원의 주소로 사용 하기도 한다. 자바스크립트에서는 id 선택자의 성능이 class 선택자보다 좋다. 더보기
[문제] inline, block 요소 [문제] 다음 중 width 속성과 height 속성이 유효하게 렌더링되지 않는 코드는? button { width:100px; height:100px; } span { width:100px; height:100px; } span { float:left; width:100px; height:100px; } span { position:absolute; width:100px; height:100px; } 정답은 2번 이다. span과 같은 Inline형 요소는 width 속성과 height 속성을 적용할 수 없다. 1번 button 요소는 inline-block형 요소이다. 3번 span 요소는 float 속성이 left가 되어 block형 요소로 변경되었다. 4번 span 요소는 position 속성에 .. 더보기
div, span 태그 div & span 콘텐츠 요소를 다른 그룹으로 나누기 위해 사용한다. 특별한 의미는 없다. 각 그룹을 다른 스타일로 표현하는데도 사용한다. div는 수직을 쌓인다. span은 수평으로 쌓인다. 좀 더 정확한 표현은 block형 요소는 수직을 쌓이고 inline 요소는 수평으로 쌓인다. div 페이지를 논리적인 구간이나 그룹으로 나누는 요소다. block형 콘텐츠에 사용한다. div 주의할 점 무분별한 남발은 구조를 복잡하게 만든다. span inline 문자, 요소를 그룹으로 나누는 요소다. Inline형 콘텐츠에 사용한다. span 주의할 점 span 태그는 block형 태그를 감쌀 수 없다. 더보기
의사, 기타 - 고급 선택자 의사 선택자 앞의 예제 중 ul 와 li 태그가 항상 함께하는 원리는 이용한 구성을 했었다. 앞에서 약간의 스타일링을 포함해도 이 정도의 변경 밖에 없었다. 먼저 data-group 속성을 이용한다. 속성명에 붙는 "~" 콤비네이터는 속성의 값이 띄어쓰기를 이용해 여러 개를 사용할 수 있을 때 그 일부 값을 이용해 선택한다. data-group 속성의 값 "Article Dog Cat"중 Cat 값이 있는 li 태그만 선택해서 background 속성을 변경했다. main 태그 아래는 바로 ul 태그가 위치한다. ul 태그는 항상 li 태그와 짝을 이루므로 생략해서 선택자의 길이를 줄일 수 있다. :first-child li:first-child 선택자를 이용하면 ul 태그 하위의 첫 번째 li 태그를 .. 더보기
속성 - 고급 선택자 속성 선택자 앞에서 ul 태그를 이용해 article 태그를 3개 구성했었다. 기본 구성은 같되 마지막 input 태그의 type 속성만 다르게 구성했었다. Input 태그를 속성값을 이용해 선택한다. 속성값 input[type="submit"] [ ] 안에 속성과 속성값을 이용해 선택자로 사용한다. border 속성을 변경했다. 앞에서 자식, 형제 콤비네이터를 이용해 background 속성을 변경했던 메뉴를 다시 예로 사용한다. 메뉴 구성에서 최 하위 a 태그를 일반 선택자를 사용해 기본 스타일링한다. padding 속성을 약간의 값을 넣어 여유를 준다. font-size 속성으로 텍스트의 크기를 키우고 text-decoration 속성으로 밑줄을 보이지 않게 했다. 속성 [title] title 속.. 더보기
자식, 형제 - 고급 선택자 자식 선택자 ul 태그를 이용해 일반 메뉴처럼 보이는 확장이 가능한 확장 메뉴 1개와 일반 상위 메뉴 4개를 구성했다. html만 작성한 후 미리보면 위와 같은 형태다. 자식 콤비네이터 > 상위 메뉴만 자식 콤비네이터 ">"를 이용해 background 속성에 #fff 색상이 적용되도록 했다. 하위 메뉴는 태그 요소를 자세히 작성해서 background 속성에 #bbb 색상을 적용했다. 상위 메뉴와 하위 메뉴의 background 색상이 다르게 표현되었다. 콤비네이터 ">"는 태그와 태그 사이에 다른 태그가 존재하면 작동하지 않는다. 바로 다음 태그에만 적용할 때 사용하는 태그다. nav ul li ul li 선택자는 위와 같이 줄여서 사용할 수 있다. 다음은 형제 콤비네이터에 대해 살펴본다. 형제 선택.. 더보기
reset, normalize 2015's most popular CSS Reset scripts, all in one place 출처: 2015년 3월 기준 가장 인기 유명한 CSS Reset 스크립트를 한 자리에 모아놓은 웹 사이트 Eric Meyer's "Reset CSS" 2.0 출처: HTML5 Doctor CSS Reset 출처: Yahoo! (YUI 3) Reset CSS 출처: Universal Selector '*' Reset 출처: Normalize.css 1.0 출처: 요즘은 Normalize.css를 사용하는 것이 추세라는데 CSS Reset과의 차이를 알아야겠다. 그리고 만들어 사용할 수도 있지만 잘 만들어 놓은 스크립트를 잘 파악해 놓고 사용하는 것도 중요하다. CSS reset은 브라우저마다의 기본 속성 값.. 더보기