UI / UX 웹 퍼블리셔 & 프론트엔드 [11] - 기본 레이아웃

저번 시간에 이어 CSS 2.0 실습을 진행하였다.

이번엔 border의 속성과 id, class의 개념을 익히고 갈 것이다.

 

 

index11.html

 

○ id & class

** id : 스타일을 지정할 때 한 가지만 지정해 사용하는 이름 (표기방식은 #이름)

        하나의 문서에 고유한 id 하나만 사용할 수 있다!

 

** class : 그룹으로 묶어 스타일을 지정할 때 사용하는 이름 (표기방식은 .이름)

→ id와 class 이름은 숫자로 시작할 수 없습니다. 

 

css1.0때는 style 속성을 사용하여 직접 객체를 꾸며주었지만,

css2.0부터 id와 class 속성으로 선언한 후, <style> 태그에서 지정하여 꾸며줄 수 있다.

 

이 때, id는 #id명 class는 .class명의 형태로 지정하여 꾸밉니다.

 

 

 

○ border 속성

border를 스타일 태그에서 생성할 때,

{ border : 두께 모양 색상 }으로 지정할 수 있다

 

두께

: px 단위로 입력해준다.

 

모양

** solid : 한 줄로 구성된 테두리

** dashed : 넓은 간격의 점선

** dotted : 좁은 간격의 점선

** double : 두 줄 테두리 (5px부터 적용된다)

 

색상

: 색을 나타내는 단어 or 해쉬 코드

 

 

 

○ <div> & <span>

<div>태그

: Division의 약자로 웹사이트의 레이아웃(전체 틀)을 만들 때 주로 사용한다.

<div> 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다.

요즘엔 레이아웃 배치를 거의 <div>를 활용하여 구성하는 추세이기에 쓰임새는 더 중요해졌다 말할 수 있다.

 

<span>태그

: 영어로 '(컴퓨터)범위'라는 의미를 가지며, <span> 태그는 다방면으로 활용이 가능한 유용한 태그다.

주로 <div>와 <p>태그와 함께 웹페이지릐 일부분에 스타일을 적용시키기 위해 사용한다.

<span>태그 안에 객체가 들어가면 그 객체의 크기만큼 공간이 할당되는 태그이다.

<span>태그로 요소를 감싸면 CSS나 JS로 그 부분을 변형시키는 것이 가능하다.

 

 

** <div> & <span> 차이점

 

1. 나열

: <div>와 <span>을 3개씩 생성하여 나열하면,

<div>는 자동 줄 바꿈이 일어나며 세로로 쌓이고, <span>은 줄바꿈 없이 가로로 나열된다.

→ <div>의 영역은 한 줄을 차지하고 <span>은 객체 크기만큼 영역을 할당 받아 그런 것이다.

 

2. 문단

: 동일한 문장을 감쌀 경우, <div>는 문장을 넘어 한 줄의 영역이 모두 할당되지만

 <span>은 객체 단위로 영역이 설정되기 때문에 객체 크기만큼의 영역만 할당된다.

 

3. 여백

: <div>의 margin은 default일 경우 top, right, bottom, left 다 적용이 되며

위아래 겹쳐지는 여백은 상쇄되지만 <span>은 left, right만 적용되고 겹쳐지지 않아 더 넓어보인다.

index11.html 결과