[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 06

06-1 CSS의 기본

스타일이란...

form을 이용해 회원가입 양식을 만들었을 때, 스타일을 적용하면 정렬, 마우스를 가져가면 색이 바뀌든지, 배치방법, 글꼴 등 보여지는 방식을 정해줌.

내용과 디자인을 분리하기 위해 html과 css를 구분함

 

스타일을 적용하기 위해서, head 태그 안에 <link rel=" " href="css/register.css(적용할 css파일 경로)"> 추가해줬을 뿐임

 

반응형 웹 디자인

스타일시트를 사용하는 또다른 목적은 여러 기기에 탄력적으로 반응하는 문서를 만들기 위함임

요새는 웹사이트에 pc, 태블릿, 스마트티비, 스마트폰 등 여러 기기들이 접근함.

따라서 각 기기별로 화면 크기에 맞게끔 웹사이트 배치를 바꿔줘야함

이또한 css의 미디어쿼리를 이용하는 것임

 

스타일 작성하기

스타일은 각 하나하나를 말함

스타일시트 문서 하나 안에 여러 스타일을 모아놓은 것

스타일 시트를 만들때는 문서 안에 만드는 내부 스타일시트와 문서 안에 있는 것들 여러개를 묶어서 따로 파일로 저장한 것을 외부 스타일시트라 함

외부스타일 시트의 경우,

<link rel="stylesheet" href="css/register.css"> <-register.css라는 외부 파일을 만들어서 link로 연결함.

 

내부 스타일시트일 경우,

head 태그 안에 <style> ~ </style> 태그안에 써주면 됨

*vs code의 경우, 영역 선택 후(드래그 등) ctrl+? 눌러주면 주석처리됨 <!-- ~ -->... html, css, js 주석기호 다 다름

 

아무 스타일이 지정되지 않은 상태 = 브라우저 기본 스타일

내가 저장하지 않아도 이미 스타일시트가 저장되어 있음

브라우저 화면>우클릭>검사 눌러보면 태그 누를때마다 적용된 스타일을 볼 수 있음

 

인라인 스타인

태그 안에 style 속성을 직접 써주는 것. 해당 태그 딱 하나에만 적용됨. 변경이 까다로우므로 사용 지양

<h1 style="color: blue">레드향</h1>

 

내부 스타일시트

스타일시트: 여러 개의 스타일을 모아놓은것

내부스타일시트는 문서 내부에 스타일 모아놓은것

<style>태그는 head태그 안에서 제일 마지막에 써줌(</head>앞에 써줌)

<style>

  h1 {

    color : blue;

  }

 </style>

여기서 h1 = 선택자, color=속성, blue=속성값

선택자는 이 스타일을 어디에다 적용할 건지를 지정. 타입선택자 혹은 태그선택자....여기선 h1에다 적용할 스타일임

color는 글자색을 바꾸는 속성임.

하나의 선택자 안에 속성과 속성값은 여러개 넣을 수 있음

<style>

  h1 {

    color : blue; (글자색)

    font-size : 3.5em; (글자 크기)

    font-style : italic; (글꼴)

  }

 </style>

속성과 속성값의 묶음(color:blue)을 스타일규칙, 스타일룰이라 함.

각 스타일규칙은 꼭 줄로 구분하지 않고 한줄에 붙여서 써도 되지만 가독성을 위해 줄바꿈을 추천.

 

외부 스타일시트

내부스타일시트(style 태그로 묶인 영역) 안의 style 정보만 모아서 별도의 문서로 저장 후 웹문서에 연결해주는 것을 말함

h1 { ~~~~ } 만 잘라서 이어 붙여줌...(복붙 후 css 파일로 css 폴더에 저장. 확장자명 꼭 .css여야 함), html 파일에 원래 있던 style 태그는 지워줌. css 파일에는 <style>태그 안써줌. 선택자와 스타일 규칙만 써주면 됨.

html파일에는 css 파일을 연결해줌 ( <link href="css/ex.css(css파일경로)" rel="stylesheet">) rel은 relation... 연결해줄 css 파일이 어떤 형태의 파일인지 알려줌. 여기선 ex.css 파일이 stylesheet 임을 알려주는 것.

외부 스타일시트 사용시 한 웹문서에서만 사용하는 것이 아니라 여러 웹문서에서도 여러번 작성할 필요 없이 사용할 수 있기 때문. 수정시에도 css파일 하나에서만 수정해주면 적용된 전체 문서 수정 가능.

---

06-2 CSS의 기본

스타일 = 선택자+스타일규칙

선택자는 스타일규칙을 어디에 적용할지를 결정함

CSS 기본 선택자

1 전체 선택자

웹 문서 전체에 적용되는 선택자. 브라우저에는 기본 스타일이 이미 적용되어 있는데, 이를 초기화하고 싶을때 많이 사용함.

기호로는 * 를 사용함.

* {

    margin:0;

}

margin은 각 요소 사이의 여백을 의미함. 외부 여백. object와 화면과의 여백(박스와 화면 테두리 사이의 여백)

padding은 각 요소 내부에서의 여백을 말함. 내부 여백. object 내의 여백. (박스 안에 써준 글자와 박스 테두리 사이의 여백)

기본적으로 여백은 상하좌우 모두에 적용되며 한쪽에만 적용하고 싶으면 따로 지정할 수도 있음

css에서는 /* */ 로 주석 적용

2 타입 선택자(태그 선택자)

특정 태그에만 스타일을 적용하고 싶을 때 사용

p {

  color : blue;

}

모든 p 태그에 글자색이 파란색이 들어감.

* 근데 p 태그 중 일부에만 글자색을 바꾸고 싶은 경우 클래스 선택자, id 선택자를 이용함

3 클래스 선택자

문서 안에서 여러번 사용 가능.

예를 들어, 문서 곳곳에 빨간색 글자를 사용하고 싶은 경우, 이름을 적당히 지어줌

.redtext {

  color : red;

}

이름만 보고도 무슨 역할을 하는지 알수있게 해주자.

클래스 선택자 이름 앞에는 . 을 써줌

어느 한 p태그로 묶인 단락에 적용하고 싶을 시 p 태그 안에 속성으로 class="redtext" 라고 써줌.

<p class="redtext"> ~~~ </p>

 

단락 전체가 아니라 일부 글자에만 적용하고 싶으면, <span> 태그로 묶어줌

<p>껍질에 붉은 빛이 돌아 <span class="redtext">레드향</span>이라 불린다</p>

 

클래스 사용자는 여러번 사용 가능하므로 해당 문서의 또 다른 부분에 redtext 또 적용할 수 있음

<p><span class="redtext">비타민 c와 비타민 p가 풍부해</span>  혈액순환, 감기 예방 ~~~~좋다.</p>

4 id 선택자

문서 안에서 한번만 사용 가능. css 뿐만 아니라 자바스크립트에서도 사용 가능.

여러번 사용한다고 오류가 나진 않지만 id선택자의 목적과 의미에 부적합함

기호로는 이름 앞에 #을 붙임.

#container {

  border : 1px solid #222;

  padding : 10px

}

---

<div>

body 안에서 각 영역의 세션을 구분함.

구역을 나누는 태그. 가로줄 전체를 다 차지함(너비가 100%)

레이아웃 구조 틀을 만들고, css를 통해 위치 및 레이어를 구분 등 html 요소의 컨테이너 역할을 함.

또한 자바스크립트를 통해 특정 작읍을 수행하고 여러 유형의 동적인 효과를 줄 수 있다.

문서 안에서 div 태그는 엄청 많이 쓰이기 때문에 뭐하는 div인지 구분해주기 위해 id를 쓴다.

 

<span>

텍스트에 색깔, 크기, 좌우간격 등을 조절하는데에 사용됨,

css 속성 inline이 자동으로 적용되어 있다.

 

<p>

div와 거의 비슷하지만 div는 세션 나누기가 목적이고, p는 글자 표현이 목적이다.

 

<div> vs <span>

div는 줄바꿈o(block level element), span은 줄바꿈x(inline level element)

display 속성을 사용해서 block <-> inline 바꾸는 것도 가능.

block level이란 왼쪽끝에서 오른쪽 끝까지 하나의 가로 영역 전체를 하지하는 것을 말함.

새 block 요소는 새 라인에서 block을 시작함. 따라서 두 block간에는 겹치는 일이 없음

inline level은 문단 중간에 들어감. 새 라인에서 시작하지 않음. 요소의 너비가 해당라인 전체가 아닌, 해당 요소의 content 크기 만큼만 차지함. 인라인 요소인 <span> 태그는 블록 요소인 <div>, <p> 태그를 하위 태그로 포함시킬 수 없음(반대는 가능)

 

<div> vs <p>

두 태그 모두 문자 정보를 출력할 수 있으며, 블록요소이므로 자동 줄바꿈을 통해 단락이 형성됨.

다만, <p> 태그는 문자 정보를 입력하는 단락을 구성함. <p>태그 하위에 다른 블록 요소가 포함되어서는 안됨(인라인 요소만 하위에 올 수 있음)

<div> 태그는 <p> 태그를 포함할 수 있음. 각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있다.

---

id 선택자 적용시, 해당 태그에 id 속성을 주고 id선택자 이름으로 값을 주면 됨

<div id="container"> ~~~ </div>

 

5 그룹 선택자

같은 스타일규칙을 가진 여러 선택자를 나열해서 표시하는것.

p { 파란글자} h1 {파란 글자}

=> 콤마로 연결해서 써주면 됨

p, h1 {

  color: blue;

}

 

 

 

캐스케이딩 스타일시트

css의 맨 앞글자는 cascade의 앞글자를 딴것. 계단식으로 적용된다는 의미.

선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정함.

 

-원칙

1. 스타일 우선순위 : 스타일 규칙의 중요도와 적용범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용

2. 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달.

 

1. 스타일 우선순위

① 얼마나 중요한가에 따라

사용자 스타일 (윈도우, 맥 등 시스템에서 만든 스타일. 사용자가 제어할 수 없음)

-> 제작자 스타일 (웹사이트를 만들 때 제작자가 만든 스타일. css에서 만들어놓은것.)

-> 브라우저 스타일 (브라우저의 기본 스타일. 시스템에서도 지정하지 않았고, css에서도 지정하지 않은 경우)

 

② 얼마나 한정지을 수 있는가에 따라

!important (그 어떤 스타일보다 우선 적용되는 스타일)

-> 인라인 스타일 (해당 태그 안에 style 속성 넣어줘서 적용시킨 스타일)

-> id 스타일 (특정 부분에만 적용되는 스타일. 문서 안에서 한번만 사용됨)

-> 클래스 스타일 (특정 부분에만 적용되는 스타일. 문서 안에서 여러번 사용됨)

-> 타입 스타일 (특정 태그에만 적용되는 스타일. 문서 안의 같은 태그에는 모두 적용됨)

 

③ 소스 순서에 따라

마지막에 온 스타일이 먼저 온 스타일을 덮어씀

 

2. 스타일 상속

자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨.

문서에서 단락에 글자크기를 따로 지정하지 않은 경우, 부모요소인 <body> 태그에 지정된 글자크기를 따르는 등의 경우를 말함. 단, 모든 속성이 다 상속되는 것은 아님(예를 들면, 글자색은 상속되지만 배경색은 상속되지 않음)