[Web] CSS

HTML에서도 디자인을 할 수 있다. <font> 태그를 이용하면 된다. 하지만 이 경우 번거롭게 한 줄씩 모두 고쳐야하는 단점이 있다. 바로 이 문자의 크기와 색상, 정렬 등 디자인 적인 부분을 해결하기 위해 새로운 언어인 CSS가 탄생했다.

 

CSS 기본 문법

웹 브라우저는 css코드를 인식할 필요가 있다. 그래서 html이 아닌 css 문법에 따라 해석을 해달라고 하는 코드를 입력해야한다. <style> 태그를 이용하면 된다.

 

<style> - </style>

= 스타일 태그 안에 css를 작성하면 된다

 

<style>

 a {

 color:red;

 text-decoration: none;

 }

</style>

= 스타일 태그 안 css 코드를 입력하면 모든 글씨가 빨간색으로 바뀐다. a는 선택자 selector이다. 해당 효과를 누구에게 줄 것인지 선택할 수 있다.

{ } 안의 내용은 효과, 선언, declarataion이라고 한다. color은 property이고 red는 value이다. text-decoration: none를 하면 밑줄 등 효과가 사라지고 text-decoration: underline을 하면 밑줄 효과가 생긴다.

 

<a href="https://sxyzn.tistory.com" style="color:red"> 블로그 </a>

= 링크 안에 style 속성을 넣어 위 스타일 태그와 같은 효과를 넣을 수 있다.

 

<style>

 h1 {

 font-size:45px;

 text-align: center;

 }

</style>

= h1 태그에 효과가 지정된다. 글씨 크기가 45px로 지정된다. text-align: center를 이용하면 가운데 정렬이 된다.

 

.

.

.

 

<style>

 a {

 color: red;

}

 .saw {

 color: black;

 }

</style>

...

<a href="https://sxyzn.tistory.com" class="saw"> 블로그 </a>

...

= .saw{  } 부분을 통해 class="saw"로 분류된 부분만 색을 검정으로 지정할 수 있다.

내가 원하는 부분이 두 클래스에 속하면 나중에 명령된 클래스의 영향만 받는다

 

id 선택자는 인라인으로 id="아이디 선택자 이름"을 입력해주고

#아이디 선택자 이름 {

 color: red;

}

이 방법으로 명령해주면 된다. 아이디 선택자는 클래스 선택자보다 우선순위가 높다.

클래스 선택자는 태그 선택자보다 우선순위가 높다.

id 클래스의 이름은 중복해서는 안된다.

 

 

박스

<style>

 h1 {

 border-width:5px;

 border-color:red;

 border-style:soild;

 }

</style>

= h1을 박스 형태로 감쌀 수 있다.

 

block level element : 해당 내용물 크기보다 부피가 큰 박스

inline element : 해당 내용물 크기만큼의 부피를 가진 박스

 

선언 {  } 안에 display: inline; 을 하면 inline으로, display: block; 를 하면 block level로 표현이 된다.

display: none; 을 하면 화면에서 박스와 내용물이 사라진다.

 

css코드에 중복이 발견된다. 따라서 border: 5px solid red; 를 하면 축약된다. 선택자 또한 h1, a {   } 으로 합칠 수 있다.

 

padding:20px;

= 내용물 (컨텐트) 와 박스 사이에 간격 생성 

 

margin:20px;

=박스와 박스 테두리 사이의 간격 생성

 

 

그리드

<div> - </div>

= 의미가 없고 디자인의 목적만 있음. 태그로 묶어주기 위한 것.  block level 이므로 줄바꿈이 된다.

 

<span> - </span>

= div랑 같지만 inline 이므로 줄바꿈이 안된다.

 

#grid{

 display: grid;

 grid-template-columns: 150px 1fr;

}

...

<div id="grid">

 <div> 내용1 </div>

 <div> 내용2 </div>

</div>

= 디자인의 목적 만으로 div를 부모태그로 썼다. grid라는 아이디를 통해 효과 변경이 가능하다.

grid-template-columns: 150px 1fr; 를 통해 "내용1" 부분은 150px로 고정이 되고 "내용2"부분은 화면의 크기에 따라 자동으로 변경이 가능하다. 

 

 

미디어 쿼리

반응형 디자인.

화면의 크기에 따라 자동으로 웹 페이지의 각 요소들이 최적화 된 모양으로 변경된다.

 

screen width가 800px 크다면 div 태그를 안보이게 하고싶다면?

= 화면의 크기가 최소 800px 라는 의미이다

 

@media(min-width:800px) {

 div {

 display:none;

 }

}

= 화면 크기가 800픽셀 이상이면 div에 해당하는 내용이 보이지 않는다.

 

 

코드 재사용

css 코드만 별도의 코드 style.css 로 만드는 것이 좋다. 그렇지 않으면 코드의 중복이 심해진다.

별도로 css 파일을 만든 후 각각의 html 파일에 <link rel = "stylesheet" href = "style.css">를 추가하면 원래 그 자리에 style.css 코드 안의 내용이 있었던 것 처럼 작동한다.

 

 

 

 

 

 

[참고자료] 생활코딩 WEB2 - CSS