[2회차] CSS

강의명 : 오픈프레임워크 활용 디지털융합 SW엔지니어 양성 과정

강의 날짜 : 21.05.24

 

 

<CSS>

 

스타일을 기술하는 방법

① html 문서 내 포함된 방식(Internal 방식)

: head 구역에 들어간 경우

html tag 규격을 지켜야 한다.

display 눈에 보이는 디자인, 사이즈 등등을 표현할 때, css로 기술한다.

뼈대는 html이지만 스타일을 씌우는 것은 css이다.

 

 

 

1. css의 구조

selector	설명
#id명	해당 id를 가진 개체를 호명할 때
.class명	해당 class명을 가진 개체를 호명할 때
*	all

css는 기본 설정을 고치려고 온 것이다. 즉, style을 재정의 하는 것이다!

html을 하나의 사람으로 본다면 css는 이 html의 스타일을 바꿔주는 것이다.

 

 

 

2. 예제 1

 

 

selector	설명
a:link	한 번이라도 방문하지 못한 link라면
a:visited	한 번이라도 방문한 적이 있는 link라면
a:hover	웹 문서 중에 마우스 커서가 over되었다면

 

현재문과 과거문이 동시에 존재하는 것이 selector이다.

*hover는 글로벌 selector로 모든 객체에게 다 줄 수 있다.

 

css 속성	설명
color	글자색
text-decoration	문서의 장식(ex.밑줄)
border	선

예약어 none : '없애라'라는 뜻의 예약어이다. NULL과는 다른 개념이다.

 

색상코드	설명
#RRGGBB	16진수 색상 코드
RGB(R,G,B)	10진수 색상 코드

 #000000 : black

 #FFFFFF : white

세밀한 색을 표현할 때는 16진수 RGB코드로 사용한다.

 

 

 

3. 예제2

 

스타일을 기술하는 방법

① html 문서 내 포함된 방식(Internal 방식)

: head 구역에 들어간 경우

html tag 규격을 지켜야 한다.

 

② 시작 tag 안에 기술하는 방식 (inline 방식)

: 속성화시켜서 그 안에 기술하는 방식이다.

 

③ 외부에서 정의해서 끌어다 쓰는 방식(external 방식)

 

 

* 브라우저의 우선순위는 Internal > inline

css 속성명	설명
border-collapse	선과 선을 합치는 속성
background-color	면의 색
text-align	수평 정렬
vertical-align	수직 정렬
cell padding	셀의 안쪽 여백
border-spacing	선 사이의 공간

css 속성값	설명
solid	실선
dotted	점선
dashed	점선과 실선의 중간

html 속성명	설명
colspan	칸 합치기
rowspan	줄 합치기
hr	horizontal rules수평선을 그려주는 tag

 

셀과 셀 사이의 공간 = cell spacing (html 관점)

선과 선을 합치면 그 공간이 사라진다 = border-collapse : collapse (css 관점)

 

css에서는 RGB 16진수 6자리를 모두 채워서  쓰지 않아도 된다.

동일한 값이 연속되면 한 번만 쓸 수 있다.(css만!)

 

text-align : right 는 오른쪽 정렬의 의미이다.

 

css는 상속의 기능이 없어서 적용하고자 하는 영역에 모두 적용시켜야 한다.(',' 를 써서 나열)

 

* sementic elements = elements with a meaning

각자 자신의 의미, 속성, 특성을 가지고 있다.

그 특성, 의미를 분석하고 display해야 한다.