0. CSS

0.1 CSS와 HTML 차이

0.1.1 HTML 문법

key=value, queryString이라고 한다.
예) type="text", 속성=속성값

0.1.2 CSS 문법

CSS는 object 생성 형태를 띄고 있다(정확히는 object가 아님).

key:value;
예) font-size: 12px; 이나 background: blue;

0.1.3 둘의 차이

HTML에서는 속성값 사이에 따옴표("")를 붙여서 구분하는데
CSS에서는 따옴표가 없고 끝에 세미콜론(;)이 붙는다.
세미콜론은 끝나는 영역을 지정해서 구분한다. 세미콜론이 인간만 알아보기 불편한 게 아니라 컴퓨터도 그래서 문장을 이해하지 못한다.

0.2 CSS는 왜 쓸까?

예쁘게 만드려고 쓴다. CSS는 HTML을 꾸며준다.
기존에 갖고 있던 element 속성들을 바꿔준다.
(block속성에서 inline으로, 역으로. 글자 크기도 조절할 수 있고, 알록달록하게 꾸밀 수 있다.)
그렇게 해서 요소를 내 마음대로 바꿔 만들 수 있다.

0.2.1 그럼 CSS로 제목도 다 만들지 HTML(`<h1~6>`)은 왜 쓸까?

영역 구분이 필요하기 때문이다.

1. CSS 적용방법

1.1 인라인 스타일

CSS의 기본 문법이라고 할 수 있으며 inline으로 적용 0순위

html의 <body>안에 직접적으로 style속성을 입력한다.

<p style="background: black; color: white;">black</p>
<p style="color: pink;">pink</p>

#짜잔

black

pink

1.2 `<style>` 태그

html파일 <head>영역에 작성, 저장된다. <body>안에 있는 elment에다 id나 class같은 선택자를 부여해서 해당 선택자에 CSS를 적용한다.

중괄호({})를 활용한 선택자의 종류를 알고, 이를 사용할 줄 알아야 한다.
컴퓨터적인 사고방식으로 처리결과를 알아야 한다.(컴퓨터의 명령처리 순위 파악)

1.2.1 쓰는 법

나는 바디에 있는 elments에 선택자를 부여하고, 그것들을 모아서 헤드에서 한 번에 CSS 작업을 처리하는 방식을 보는데 이누야샤에 나오는 머리카락요괴가 떠올랐다.

아름다운 이 요괴의 이름은 '역발의 유라'로 머리카락을 자유로이 조종하는 여자다.
나는 이 요괴가 <head>안에 올라 들어가서 <body>안에 여러 elments에게 머리카락(선택자)을 걸고, 꼭두각시를 조종하듯이 원하는대로 CSS를 써서 꾸민다는 느낌을 받았다.

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="UTF-8">
        <title>Documents</title>
        <style>
        	#hair{
            	font-size: 25px;
                color: skyblue;
            }
          	  .hair{
            	font-size: 25px;
                color: lavender;
            }
        </style>
	</head>
	<body>
		<p id="hair">유라</p>
		<p class="hair">맘대루</p>
	</body>
</html>

<head> 안에서 <style> 태그 안에 선택자와 중괄호를 입력한다.
중괄호를 쓰는 이유는 여기서부터({) 여기까지가(}) id가 hair인 영역, class가 hair인 영역을 우리 사람의 눈으로도 쉽게 구분하는 것처럼, 컴퓨터도 쉽게 구분할 수 있기 때문이다.
중괄호 안에서 CSS 명령에 맞게 <body> 내용이 바뀐다.

<style>태그 안을 보면, 선택자 이름 앞에 붙는 문자가 다른데
#는 id 선택자를, .은 class 선택자를 뜻한다.

#짜잔

Documents

유라

맘대루

1.2.2 선택자(id, class)

특정 element 가 가지고 잇는 고유값이다.

  <h2 id="title">제목</h2>

"h2, 너를 이제부터 title이라고 불러주겠다!"

id는 레이아웃 구성 하나밖에 없을 때 사용하고,
보통 반복적으로 사용하는 부분에 대해서는 class를 사용한다.

<ul class="menu1">
      <li>리스트1</li>
      <li>리스트2</li>
      <li>리스트3</li>
      <li>리스트4</li>
  </ul>

  <ul class="menu2">
      <li>리스트1</li>
      <li>리스트2</li>
      <li>리스트3</li>
      <li>리스트4</li>
</ul>

li 내부 전부에 CSS 적용시키고 싶다면
ul > li { }
"<ul>안에 있는 <li>만 괄호 안에 적은대로 하겠다."

"class가 menu2인 리스트들 , <li>만 괄호 안에 적은대로 하겠다."
.menu2 > li { }

1.2.3 *선택자

위에서 선택자에 맞게 id는 #, class는 .로 <head>에서 코드를 썼
선택자도 있다. 선택자는 모든 엘리먼트를 겨냥한다. *{꾸미는 내용}
해당 엘리멘트 전체를 꾸밀 때는 (엘리멘트명) {꾸미는 내용} 이렇게 쓴다.

예시)

	<head>
    <style>
      *{
      font-size: 20px;
      color: blue;
      }
      p{
      font-size: 15px;
      color: red;
      }
    </style>
</head>

* 선택자는 모든 elements에 영향을 줄 수 있기도 하고 별이라고도 불러서 나는 군대 생각이 났다. 똥별이든지 제대로 된 장군이든지 일개 졸병들은 그들이 내리는 명령 하나하나에 안/좋은 영향을 받는다고 생각한다.

1.3 외부파일 생성해서 적용

인라인 스타일과 <style>태그는 html파일 안에서 CSS를 적용시킨다는 점에서 같다. 이와 달리 확장자명이 .css인 파일을 따로 만들고 꾸며 줄 html파일과 연결해 작업하는 방식이 있다.

파일경로(절대경로와 상대경로)에 대해서 배웠다

자주 쓰이는 CSS 내용

1.4 margin padding 이라는 속성의 개념

margin:

padding:

width height 넓이와 높이를 지정할 수 있다

width:

height:

margin: 15px 0 15px 0; 순서대로 시계 방향으로(12-3-6-9) /
/네 방향, 두 방향(위 아래), 전체 방향 / 세 방향은 검색해 /
box-sizing: border-box; /보더박스가 짝꿍이다 */

Author And Source

이 문제에 관하여(Day2(211221) - CSS 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@happ3715/Day2211221-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Day2(211221) - CSS 기초