XAML or HTML

'HTML'에 해당되는 글 22건

  1. [문제] color 속성의 상속
  2. header, footer, main
  3. nav, aside
  4. id, class
  5. [문제] inline, block 요소
  6. div, span 태그
  7. 의사, 기타 - 고급 선택자
  8. 속성 - 고급 선택자
  9. 자식, 형제 - 고급 선택자
  10. reset, normalize

[문제] color 속성의 상속

HTML

[문제] a 요소의 color 값이 blue 이고 backround-color 값은 white 이다. a 요소에 border-style과 border-width를 부여했지만 border-color 값을 지정하지 않았다면 a 요소의 border-color는 어떤 색으로 표시되는가?

  1. black
  2. blue
  3. white
  4. gray

   

정답은 2번이다. border-color 값을 선언하지 않는 경우 border-color 값은 color 값으로부터 상속 받습니다. a 요소의 color 값이 blue 이므로 border-color 값은 blue가 됩니다.

   

border 속성은 위처럼 간략히 사용할 수 있다. 색상은 다양한 방법으로 지정할 수 있다. 다른 포스트에서 알아보겠다.

 

<출처>

정찬명

dece24@gmail.com

http://naradesign.net

010-3450-9380

'HTML' 카테고리의 다른 글

[문제] color 속성의 상속  (0) 2015.04.15
header, footer, main  (0) 2015.04.14
nav, aside  (0) 2015.04.13
id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10

header, footer, main

HTML

   

header, footer

header, footer 태그는 여러 번 사용할 수 있다. header, footer 태그는 페이지 전체 또는 특정 내용의 도입부와 맺음말 부분에 사용하는 의미를 가진다.

   

  • header = 도입부
  • footer = 맺음말

   

   

Main

main 태그는 콘텐츠의 본문 영역으로서 다른 페이지와 중복되는 내용은 포함하지 않도록 주의한다. main 태그는 한 페이지에 딱 한번만 사용할 수 있다. 그렇기 때문에 body 안에서 메인 콘텐츠임을 표시할 id나 class를 굳이 지정할 필요가 없다. 하나뿐이니깐.

   

'HTML' 카테고리의 다른 글

[문제] color 속성의 상속  (0) 2015.04.15
header, footer, main  (0) 2015.04.14
nav, aside  (0) 2015.04.13
id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10

nav, aside

HTML

   

nav

nav 요소는 사이트의 주된 탐색 링크 섹션을 의미한다. 메인 메뉴에 주로 사용된다. 보통 class명으로 'gnb(global navigation bar)'를 주로 사용한다. 메인 메뉴 아래 하위 메뉴는 'lnb(local navigation bar)'를 주로 사용한다.

   

  • gnb > lnb

   

aside

aside 요소는 부수적인 섹션을 의미한다. 일반적으로 광고 영역 또는 지름길을 역할을 하는 영역이다.

'HTML' 카테고리의 다른 글

[문제] color 속성의 상속  (0) 2015.04.15
header, footer, main  (0) 2015.04.14
nav, aside  (0) 2015.04.13
id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10

id, class

HTML

   

선택자

태그 요소를 선택하는데 사용된다.

   

  1. id는 #id 형태로 사용한다. id는 문서 안에서 딱 한번만 사용할 수 있다. 같은 id는 반복해서 사용할 수 없다.
  2. class는 .class 형태로 사용한다. class는 여러 개의 태그 요소에 중복 사용 가능하다. 중복되거나 공통된 스타일 요소가 있을 때 사용하기 적합하다.

   

우선순위

id > class

   

주의할 점

id와 class는 하나의 태그 요소에 함께 사용 가능하다. 숫자로 시작할 수 없다.

id는 URL로 사용 가능하다. 자원의 주소로 사용 하기도 한다. 자바스크립트에서는 id 선택자의 성능이 class 선택자보다 좋다.

'HTML' 카테고리의 다른 글

header, footer, main  (0) 2015.04.14
nav, aside  (0) 2015.04.13
id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10
의사, 기타 - 고급 선택자  (0) 2015.04.08

[문제] inline, block 요소

HTML

[문제] 다음 중 width 속성과 height 속성이 유효하게 렌더링되지 않는 코드는?

  1. button { width:100px; height:100px; }
  2. span { width:100px; height:100px; }
  3. span { float:left; width:100px; height:100px; }
  4. span { position:absolute; width:100px; height:100px; }

   

정답은 2번 이다. span과 같은 Inline형 요소는 width 속성과 height 속성을 적용할 수 없다.

   

1번 button 요소는 inline-block형 요소이다.

3번 span 요소는 float 속성이 left가 되어 block형 요소로 변경되었다.

4번 span 요소는 position 속성에 값이 absolute가 되어 block형 요소로 변경되었다.

   

block형 요소만 width, height 속성의 값이 유효하다.

   

[문제] inline 요소와 관련하여 틀린 설명은?

  1. width, height 값을 적용할 수 없다.
  2. 인접한 inline 형제 요소들과 동일한 행에 배치된다.
  3. 수직 margin과 수직 padding을 적용할 수 없다.
  4. vertical-align 속성을 적용할 수 없다.

정답은 4 이다.

   

[문제] block 요소와 관련하여 틀린 설명은?

  1. width, height 값을 적용할 수 있다.
  2. 인접한 형제 요소들로부터 줄 바꿈(내림)이 된다.
  3. 수직 margin과 수직 padding을 적용할 수 있다.
  4. vertical-align 속성을 적용할 수 있다.

정답은 4 이다. vertical-align 속성은 inline 요소에만 적용 가능하다.

   

<출처>

정찬명

dece24@gmail.com

http://naradesign.net

010-3450-9380

'HTML' 카테고리의 다른 글

nav, aside  (0) 2015.04.13
id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10
의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07

div, span 태그

HTML

   

div & span

콘텐츠 요소를 다른 그룹으로 나누기 위해 사용한다. 특별한 의미는 없다. 각 그룹을 다른 스타일로 표현하는데도 사용한다. div는 수직을 쌓인다. span은 수평으로 쌓인다. 좀 더 정확한 표현은 block형 요소는 수직을 쌓이고 inline 요소는 수평으로 쌓인다.

   

   

div

페이지를 논리적인 구간이나 그룹으로 나누는 요소다.

block형 콘텐츠에 사용한다.

   

div 주의할 점

무분별한 남발은 구조를 복잡하게 만든다.

   

span

inline 문자, 요소를 그룹으로 나누는 요소다.

Inline형 콘텐츠에 사용한다.

   

span 주의할 점

span 태그는 block형 태그를 감쌀 수 없다.

'HTML' 카테고리의 다른 글

id, class  (0) 2015.04.12
[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10
의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07
자식, 형제 - 고급 선택자  (0) 2015.04.06

의사, 기타 - 고급 선택자

HTML

의사 선택자

   

앞의 예제 중 ul 와 li 태그가 항상 함께하는 원리는 이용한 구성을 했었다.

   

앞에서 약간의 스타일링을 포함해도 이 정도의 변경 밖에 없었다.

   

먼저 data-group 속성을 이용한다. 속성명에 붙는 "~" 콤비네이터는 속성의 값이 띄어쓰기를 이용해 여러 개를 사용할 수 있을 때 그 일부 값을 이용해 선택한다.

   

data-group 속성의 값 "Article Dog Cat"중 Cat 값이 있는 li 태그만 선택해서 background 속성을 변경했다.

   

main 태그 아래는 바로 ul 태그가 위치한다. ul 태그는 항상 li 태그와 짝을 이루므로 생략해서 선택자의 길이를 줄일 수 있다.

   

:first-child

li:first-child 선택자를 이용하면 ul 태그 하위의 첫 번째 li 태그를 선택할 수 있다. :first-of-type 와 바꾸어 사용할 수 있다.

   

:last-child

li:first-child 선택자를 이용하면 ul 태그 하위의 마지막 li 태그를 선택할 수 있다. :last-of-type 와 바꾸어 사용할 수 있다.

   

:only-child

자주 사용하지 않는 듯 하지만 예를 들어 li 태그는 a 태그와 짝을 이루어 주로 사용된다. 이럴 때 사용한다. :only-of-type 와 바꾸어 사용할 수 있다.

   

새로운 선택자를 이용해 위와 같이 스타일링해 본다. border-radius 속성과 border 속성을 이용하였다.

   

li 태그 하위의 구성을 보면 p 태그가 2번 반복해서 사용되었다.

   

이럴 때 "~" 일반 형제 콤비네이터와 :last-of-type 선택자를 함께 사용하면 마지막 p 태그만 선택할 수 있다.

   

두 번째(마지막) p 태그만 텍스트 사이즈가 반복적으로 작아졌다.

   

앞서 티스토리 상위 메뉴만 남겨 두고 스타일링을 했었다.

   

:nth-child( )

:nth-last-child( )

:nth-of-type( )

( ) 안에 수 또는 식을 넣어 선택할 수 있는 선택자다. 음수를 이용할 수도 있다.

   

:nth-child(3) 선택자를 이용해 3번째 li의 하위 a 태그를 선택해 스타일링하였다.

   

키워드 odd, even을 이용해 "홀 , 짝"을 표현할 수도 있다.

   

odd : 홀 / even : 짝

   

even 키워드를 이용해 짝수 번째 li 태그를 선택하고 background 속성에 값을 변경했다.

   

기타 선택자(가상, 상태, 상황, 구조...)

   

:hover

마우스 오버 상태

  

:focus

키보드 포커스 상태

  

:active

클릭 후 누르고 있는 상태

  

:visited

방문한 링크

  

:empty

하위 요소가 포함하지 않는 태그

  

:not

부정 선택

not([type=text])

:disabled:

비활성화 상태

  

:enabled

활성화 상태

  

:checked

책크 상태

  

:before

태그 시작 직후

  

:after

태그 끝나기 직전

  

   

그 외에도 다양한 선택자가 존재한다. 공부하자!

'HTML' 카테고리의 다른 글

[문제] inline, block 요소  (0) 2015.04.11
div, span 태그  (0) 2015.04.10
의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07
자식, 형제 - 고급 선택자  (0) 2015.04.06
reset, normalize  (0) 2015.04.02

속성 - 고급 선택자

HTML

속성 선택자

앞에서 ul 태그를 이용해 article 태그를 3개 구성했었다.

   

기본 구성은 같되 마지막 input 태그의 type 속성만 다르게 구성했었다.

   

Input 태그를 속성값을 이용해 선택한다.

   

속성값 input[type="submit"]

[ ] 안에 속성과 속성값을 이용해 선택자로 사용한다.

   

border 속성을 변경했다.

   

앞에서 자식, 형제 콤비네이터를 이용해 background 속성을 변경했던 메뉴를 다시 예로 사용한다.

   

메뉴 구성에서 최 하위 a 태그를 일반 선택자를 사용해 기본 스타일링한다.

   

padding 속성을 약간의 값을 넣어 여유를 준다.

   

font-size 속성으로 텍스트의 크기를 키우고 text-decoration 속성으로 밑줄을 보이지 않게 했다.

   

속성 [title]

title 속성을 가지고 있는 태그를 선택한다.

   

속성값 일부 부분 [href*="facebook"]

지정된 속성의 값에 "facebook"이 포함된 태그를 선택한다.

   

속성값 시작 부분 [href^="kr"]

지정된 속성의 속성값이 "kr"로 시작되는 태그를 선택한다.

   

속성값 끝 부분 [href$=".me"]

지정된 속성의 속성값이 ".me"로 끝나는 태그를 선택한다.

   

티스토리를 제외한 나머지 상위 메뉴의 크기를 늘렸다.

   

현재까지 작업된 결과물이다. 선택자 이외 내용은 생략함에 따라 조금 차이가 있을 수 있다.

'HTML' 카테고리의 다른 글

div, span 태그  (0) 2015.04.10
의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07
자식, 형제 - 고급 선택자  (0) 2015.04.06
reset, normalize  (0) 2015.04.02
reset (스타일 초기화)  (0) 2015.04.01

자식, 형제 - 고급 선택자

HTML

자식 선택자

ul 태그를 이용해 일반 메뉴처럼 보이는 확장이 가능한 확장 메뉴 1개와 일반 상위 메뉴 4개를 구성했다.

   

html만 작성한 후 미리보면 위와 같은 형태다.

   

자식 콤비네이터 >

상위 메뉴만 자식 콤비네이터 ">"를 이용해 background 속성에 #fff 색상이 적용되도록 했다.

하위 메뉴는 태그 요소를 자세히 작성해서 background 속성에 #bbb 색상을 적용했다.

   

상위 메뉴와 하위 메뉴의 background 색상이 다르게 표현되었다. 콤비네이터 ">"는 태그와 태그 사이에 다른 태그가 존재하면 작동하지 않는다. 바로 다음 태그에만 적용할 때 사용하는 태그다.

   

nav ul li ul li 선택자는 위와 같이 줄여서 사용할 수 있다. 다음은 형제 콤비네이터에 대해 살펴본다.

   

형제 선택자

   

이번에는 ul 태그를 이용해 article 태그를 3개 구성했다. 기본 구성은 같되 마지막 input 태그의 type 속성만 다르게 구성했다.

   

html만 작성한 후 미리보면 위와 같은 형태다.

   

p 태그를 다른 콤비네이터를 이용해 선택한 후 스타일을 변경한다.

   

일반 선택자 ( article p )

아무런 콤비네이터 없이 p 태그를 선택해서 color 속성에 #fff 값을 적용하면 모든 p 태그의 텍스트 색상이 변경된다.

   

인접 형제 콤비네이터 ( article h2+p )

h2 태그와 p 태그를 인접 형제 콤비네이터 "+" 를 이용해 선택한 후 color 속성에 #628 값을 적용하면 h2 태그 바로 다음에 오는 p 태그의 텍스트 색상만 변경된다.

   

일반 형제 콤비네이터 ( article h2~p )

h2 태그와 p 태그를 일반 형제 콤비네이터 "~" 를 이용해 선택한 후 margin 속성 top. bottom에만 10px 값을 적용하면 h2 태그와 동일한 단계의 모든 p 태그의 margin이 추가되어 위, 아래 간격이 벌어진다.


대부분의 스마트폰 웹브라우저는 일반 형제 콤비네이터 "~" 를 지원하지 않는다. 


'HTML' 카테고리의 다른 글

의사, 기타 - 고급 선택자  (0) 2015.04.08
속성 - 고급 선택자  (0) 2015.04.07
자식, 형제 - 고급 선택자  (0) 2015.04.06
reset, normalize  (0) 2015.04.02
reset (스타일 초기화)  (0) 2015.04.01
viewport 설정  (0) 2015.03.31

reset, normalize

HTML

2015's most popular CSS Reset scripts, all in one place

출처: <http://www.cssreset.com/>

   

2015년 3월 기준 가장 인기 유명한 CSS Reset 스크립트를 한 자리에 모아놓은 웹 사이트

   

Eric Meyer's "Reset CSS" 2.0

출처: <http://www.cssreset.com/scripts/eric-meyer-reset-css/>

   

HTML5 Doctor CSS Reset

출처: <http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/>

   

Yahoo! (YUI 3) Reset CSS

출처: <http://www.cssreset.com/scripts/yahoo-css-reset-yui-3/>

   

Universal Selector '*' Reset

출처: <http://www.cssreset.com/scripts/universal-selector-css-reset/>

   

Normalize.css 1.0

출처: <http://www.cssreset.com/scripts/normalize-css/>

   

요즘은 Normalize.css를 사용하는 것이 추세라는데 CSS Reset과의 차이를 알아야겠다. 그리고 만들어 사용할 수도 있지만 잘 만들어 놓은 스크립트를 잘 파악해 놓고 사용하는 것도 중요하다.

   

  1. CSS reset은 브라우저마다의 기본 속성 값을 초기화하는 것이다. 그래서 필요한 속성들을 다시 재설정해줘야 하는 단점이 발생한다고 한다.
  2. Normalize.css는 브라우저 기본 스타일 시트를 동일하게 만들어 준다. 브라우저의 버그 및 불일치까지도 수정한다. Bootstrap도 이것을 기반으로 만들었다고 한다. 최신 HTML5 요소를 포함한다.
  3. 비슷하게 느껴지지만 엄연히 차이가 있다고 한다.

   

P.S. 아직 이해가 덜 되서 "XX 그렇다고 한다"라는 표현으로 씀. ^^;

   

<참고>

http://raja.tistory.com/535

http://raja.tistory.com/539

http://aboooks.tistory.com/115

'HTML' 카테고리의 다른 글

속성 - 고급 선택자  (0) 2015.04.07
자식, 형제 - 고급 선택자  (0) 2015.04.06
reset, normalize  (0) 2015.04.02
reset (스타일 초기화)  (0) 2015.04.01
viewport 설정  (0) 2015.03.31
meta 태그  (0) 2015.03.30