table 태그 / css 수업 시작

표를 만드는  table태그란?

부모자식 태그로 이루어져 있고 이전에는 레이아웃을 만드는 태그로 사용되었다.
현재는 게시판 영역과 같은 부분에 많이 사용되는 태그로 표를 구성해준다.
부모태그인 table태그로 행과 열을 묶는다.

행은 tr태그로 표현하고, 열은 td로 표현한다. 그리고 표의 제목을 나타내는 th가 있다.

table태그(좌) / table태그 적용된 웹페이지로 css 적용되어 칸이 어떻게 나눠지는지 보인다(우)

 

---

 

이렇게 html을 구성하는 태그를 배우고 있다. 하지만 이 html만으로는 우리가 아는 웹사이트를 만들 수 없다.

html을 꾸며주는 css, java script... 등을 사용하여 적용시켜 줘야 한다.

그 중에 css 작성을 시작 했다.

 

css란?
html구조에 디자인을 입히는 언어. Cascading Style sheets의 약자로
위에서 아래로 흐르는 디자인시트 언어라는 의미다. 
웹 문서에서 글꼴이나 색상, 정렬, 요소의 배치 등등 겉모습을 결정짓는 디자인 언어.
css의 가장 큰 특징은 위에서 아래로 속성을 하나씩 적용할 때 동일한 속성이 있으면
아래에 있는 속성을 먼저 적용한다.

 

[ 외부 스타일시트 / 내부 스타일시트 / 인라인 스타일시트 ]

 

내부 스타일시트는 html 문서 안에 <style>태그를 이용해 css를 문서 내부에 작성하는 방법을 말한다.
외부 스타일시트보다 우선순위가 높지만 html에 css속성들이 너무 많이 작성되어 파일 길이가 길어지면
유지보수가 더 어렵기 때문에 외부 스타일시트를 주로 사용한다.

외부 스타일시트★는 css라는 폴더를 만들어 그 안에 css파일을 따로 관리하는 것을 말한다.
외부 스타일시트로 관리하면 관련된 파일을 찾기 편하고 유지보수에 훨씬 용이하다는 장점이 있다.
외부 스타일시트는 내부 스타일시트에 비해 우선순위가 낮다.

인라인시트는 (body 안)태그에 style이라는 속성으로 직접적으로 스타일을 적용하는 방식을 말한다.
내부 스타일시트보다 우선순위가 높아 태그에 직접 적용한 스타일이 절대적으로 적용된다.
인라인 스타일은 가독성이 떨어지고 우선순위가 높아 수정하기가 어려우므로 사용되지 않는다.

그리고 또 하나 브라우저 기본 스타일시트는 브라우저에 기본적으로 내장되어있는 스타일시트를 말한다.
h1이나 ul. li 등등 태그를 출력했을 때 보이는 이 특징들은 모두 브라우저 안에 있는 기본
스타일시트가 적용되어 보이는 디자인이다.
보통 웹페이지를 만들 때에는 브라우저 기본 스타일시트를 '초기화'하여 사용한다.

 

!important : 특정 속성의 속성값 뒤에 선언하여 사용한다. 어떤 스타일시트 또는 어떤 
             선택자보다도 우선순위가 가장 높다. important가 적용된 속성은 다시
             수정할 수 없으며, 강제로 해당 속성을 적용한다.
             즉, 유지보수가 어렵기 때문에 조심히 사용해야하는 속성.
             예시) 선택자{ 속성명 : 속성값 !important; }

 

스타일시트 종류

 

css 내부 스타일시트

 

인라인 스타일시트

 

css연결태그_link:css

 

외부 스타일시트 작성

 

외부 스타일시트는 아래 처럼 따로 폴더를 만들어서 확장자 .css가 붙은 페이지를 만들어서 html에 연결해준다.

기본 폴더 구성(예시)

 

그리고 첫 줄에 html과는 다르게 @charset "utf-8";을 기입한다.

html과 다른 점은 html 태그명을 <>안에 넣어주는 것처럼 css는 @으로 시작하는 module을 넣어줘야 한다.

'module : 하나의 기능을 하는 코드 덩어리 ex) @charset'

그리고 연결할 html태그명 뒤에 {} 중괄호를 사용하여 안에 명령어를 입력한다.

주석은 단축키는 같지만 css 상 /* 내용 */ 이렇게 써진다.

 

그리고 중요한 css 선택자(선택자-불러온 요소(ex.h1))의 우선순위를 만들어 스타일을 적용 시켜 줄 수 있다.

css 선택자란?

태그를 선택해서 디자인을 적용한다라고 해서 '선택자'라고 부른다.

css선택자의 종류로는

'id선택자(#)','class선택자(.)',
'태그명 선택자'(3가지는 기본 선택자),
'전체 선택자(*)'로 나누어진다.

다양한 태그나 class나 id를 한꺼번에 불러와서 스타일을 적용하고 싶다면 (,)그룹 선택자를 사용한다.

(#)id > (.)class > tag명 선택자 > (*)전체, 순으로 우선순위가 높다.

 

선택자를 사용한 css와 연결한 html

위의 html과 css를 적용한 웹페이지