[생활코딩] CSS

HTML은 큰 붐을 일으켰지만 디자인 측면에서 아쉬운 점이 많았다.

이 아쉬운 면을 어떻게 해결할 것인가?

 

1. HTML 자체에 디자인을 다루는 태그를 추가한다 -> 쉽지만 얕은 해결법

2. 디자인을 다루는 새로운 언어를 만든다 -> 어렵지만 근본적인 해결법

 

만약 <a href = "something.html"> 과 같은 태그가 1억개가 되는데, 매일같이 여기의 색을 변경해달라는 요청이 생긴다면?

정말 힘들 것이다. 

 

이렇게 등장한 것이 CSS

 

CSS를 이용하면 효율성이 극대화되고, 유지보수가 훨씬 쉬워진다. 

 

CSS를 쓰는 법

1. style 태그를 쓴다.

ex) 링크만 검정색으로 변경하고 싶은 경우

  <style>
  a {
    color:black;
  }
  </style>

 

ex) 링크에 있는 밑줄을 없애고 싶은 경우

  <style>
  a {
    color:black;
    text-decoration: none;
  }
  </style>

 

2. style 속성을 쓴다.

ex) 특정 링크에는 다른 색을 지정하고 싶은 경우

  <li><a href="1.html" style="color:red">CSS</a></li>

ex) 특정 링크에는 밑줄을 표시하고 싶은 경우

  <li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li>

 

명칭

출처: 이미지 내

구분지을 때에는 세미콜론이 필수

 

선택자 Selector

위에 있는 선택자가 더 영향력이 낮다. 아래로 갈수록 영향력이 높아짐. 

순서에 영향받지 않도록 선택자에도 종류가 있음.

선택자 종류: CSS Selectors Reference (w3schools.com)

 

태그 선택자 - 일반 선택자, 포괄적임

class 선택자

id 선택자 - 유일무이한 값

 

 

박스모델 box model

{"originWidth":408,"originHeight":202,"style":"alignCenter","caption":"출처: The CSS Box Model. The CSS box model describes the design…

 

(element는 태그와 같은 의미)

inline element: 자신의 크기만 갖는 태그

block level element: 화면 전체를 사용하는 태그

 

content와 border(테두리) 사이의 간격 = padding

border와 웹페이지 테두리 사이의 간격 = margin

 

개발자 도구 활용하기

웹브라우저에서 F12를 누르거나 오른쪽 마우스 - 검사 메뉴 클릭

 

그리드

<div> 아무런 의미가 없는 디자인 목적의 태그. block level element로 화면 전체를 사용한다.

<span> 위 태그와 동일하지만 inline element로 자신의 크기만 갖는다.

 

그리드는 최신기술임. 

키술의 통계를 보여주는 사이트 = Can I use... Support tables for HTML5, CSS3, etc

 

반응형 디자인

responsive web

화면의 크기에 따라서 웹페이지의 각 요소가 반응하여 동작하는 디자인

 

 

<미디어쿼리 mediaquery>

@media(조건){
	변화시킬 selector{
    property:value;
    }
}

 

CSS 코드 복제하기

여태 실습은 2.html을 가지고 이루어짐.

한 페이지에만 적용된 디자인을 다른 페이지에도 적용하려면?

 

전부 일일이 해야 하나?

css 파일을 따로 만들어 그 곳에 내용을 작성한다.

기존에 html 파일에 있던 style 태그는 모두 지운다. (<style> </style> 이 태그도 지움!)

div나 span 같이 id나 class가 지정된 태그는 지우지 않는다.

 

<meta charset="utf-8"> 아래에 아래 코드를 추가한다.

<link rel="stylesheet" href="파일명.css">