Hyun's Wonderwall

[웹 공부] 생활코딩 WEB2 - CSS 강의 메모 (완강) 본문

Study/Web

[웹 공부] 생활코딩 WEB2 - CSS 강의 메모 (완강)

Hyun_! 2023. 1. 31. 16:13

생활코딩 WEB2 - CSS

 

WEB2 - CSS - 생활코딩

수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.  수업대상 이 수업은 웹 페이지를 아름답게 디자인

opentutorials.org

1일차 : 수업소개 ~ CSS의 등장

[1. 수업 소개]

CSS는 웹 페이지 디자인을 위해 쓰인다
<수업 내용>
1. CSS의 기본 문법 (선택자, 속성)
2. 그리드를 이용해 현대적인 레이아웃을 제작하는 방법
3. MediaQuery를 이용해 다양한 크기의 스크린에 대응하는 방법

----
[2. CSS 등장 이전의 상황]
<font color="red">WEB</font> 와 같은 방식으로 'font 태그'를 씀.
효율적인 해결책이 CSS.


----
[3. CSS의 등장]

  • HTML의 주석: <!-- 부터 -->

웹브라우저는 HTML로 해석, 그러므로 CSS를 CSS 언어의 문법에 맞게 해석하라고 HTML문법으로 알려줘야 함.
<style>...</style> 태그를 사용하자
모든 a태그 텍스트의 색상을 빨간색으로 바꾸는 방법? head 태그 안에 다음과 같이 넣는다

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

중복제거효과 엄청나고 효율적.

2일차 : ~ CSS 속성을 스스로 알아내기

[4. CSS의 기본 문법]
HTML 코드 안에서 CSS 쓰는 방법

(1) style 태그

  • 형식: <style>
    선택자 {
      효과;
    }
    </style>

style 태그 사이에 선택자selector를 사용하여 태그에 효과declaration를 지정한다.
(a, h1 선택자로 사용시 '태그 선택자'를 사용한 것)
    ex. <style> a { text-decoration:none; } </style>
* 하나의 선택자에 여러개의 효과를 지정 가능하다.
* 효과 지정 끝에는 꼭 세미콜론';'을 쓴다.

 

(2) style 속성

  • 형식(태그 내에 작성): <태그명 style="효과">...</태그명>

HTML 태그 안에서 style 속성을 이용해 CSS 문법으로 해석되도록 하여, 하나의 요소에 스타일을 적용할 수 있다.
값으로 반드시 CSS의 효과가 들어온다.
    ex. <a href="2.html" style="color:red; text-decoration:underline">CSS</a>
* style 속성을 직접 사용한 경우는 위치하고 있는 태그에 효과를 주는 것이므로 선택자를 쓰지 않는다.
* 여러개의 효과들을 구분하기 위해 사이에 세미콜론';'을 쓴다.

* 링크 밑줄 없애기: text-decoration:none
* 밑줄 주기: text-decoration:underline

----
[5. 혁명적 변화]
a { 
    color:red;
}
a = 선택자 selector
color:red; = 선언, 효과 declaration
color = 속성 property
red = 값 value

----
[6. CSS 속성을 스스로 알아내기]

/*문자열 폰트 크기 지정 (large; 이렇게도 가능)*/
h1{
    font-size:250%
}
h1{
    font-size:45px;
}

/*문단 정렬 방식 지정*/
h1{
    text-align:center;
}

3일차: ~ CSS 선택자를 스스로 알아내는 방법

[7. CSS 선택자의 기본] - class와 id
CSS의 style 태그 사이에 태그 선택자 대신 class 선택자, id 선택자를 사용해 코드 중복을 없앨 수 있다.
(wet한 코드➡dry한 코드: don't repeat yourself.)
각각 요소 쪽에는 (HTML의) class 속성, id 속성을 써줘서 사용한다.

  • class 클래스: 여러 요소에 연관성, 통일성을 부여하기 위해 활용한다. 유연하게 사용 가능하다. (포괄적.)
  • id 아이디: 하나의 특정한 요소에 유일무이한 고유성을 부여하기 위해 활용한다. (구체적. 예외. 특수.)

class 선택자

특정 class 값을 가지는 요소들을 모두 선택한다.

  • 선택자 형식:  .클래스명
  • 태그 내 class 속성 형식: class="클래스명1 클래스명2 ..." (클래스명=class 속성의 값=class 선택자 이름)

1. class 속성은 여러 클래스명들을 지정할 수 있고 각각은 띄어쓰기로 구분한다.

2. 한 class 선택자로 여러 요소를 동시 제어할 수 있다. (중복 사용 가능)

 

id 선택자

특정 id 값을 가지는 요소를 선택한다.

  • 선택자 형식:  #아이디명
  • 태그 내 id 속성 형식: id="아이디명" (아이디명=id 속성의 값=id 선택자 이름)

1. id 속성은 유일한 값을 가져야 한다. (1개만 존재)

2. 한 요소에 사용된 아이디명은 다른 요소의 값으로 중복 사용이 불가하다. (CSS에서 정상 작동하더라도 JS에서는 오류 발생)

 

Cascading 캐스캐이딩

HTML 요소는 하나 이상의 스타일(CSS)에 영향을 받을 수 있다. (하나의 태그에 여러 스타일이 적용될 경우 속성이 중복될 수 있다.)
어떤 스타일을 입힐지 우선순위를 결정하는 것이 캐스캐이딩.
우선순위 결정 요인 3가지는 중요도, 명시도, 순서가 있는데 아직 중요도와 관련한 것들은 안 배웠으므로 명시도와 순서만 써보자.


CSS Secificity 명시도 우선순위, 선택자 우선순위

[!important > 인라인 스타일(style 속성) > id 선택자 > class 선택자 > 태그 선택자 > 전체 선택자]
* 우선순위가 같은 경우 가장 나중에 선언된(아래쪽의) 선택자가 우선이다.
* class에서, 한 태그 내 class 속성 값 클래스명들의 앞뒤 순서는 우선순위와 무관하다.

<style>
    .saw {
        color:gray;
        text-decoration: underline;
    }
    .active {
        color:red;
    }
    .blue {
        color:blue;
    }
</style>
<a class="saw blue active">내용</a>
/*->내용은 밑줄o, 파란색 글씨*/


<주의!> 스타일 적용 우선순위는 개별적인 태그에 관한 것이다.
한 내용을 여러 개의 태그가 감싸고 있을 경우, 스타일 적용 우선순위는 각각의 태그별로 판단되므로, 태그를 적은 순서대로(앞쪽부터) 스타일이 적용된다. 이때 여러 태그에서 속성이 중복될 경우 최종적으로 가장 안쪽 태그(나중 태그)의 속성값이 적용된다.(덮어씌워짐)

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:blue;
      text-decoration: none;
    }
    h1 {
      color:green;
      font-size:45px;
      text-align: center;
    }
  </style>
</head>
<body>
    <h1 style="color:indigo">Hello <a href="index.html">WEB</a></h1>
    <a href="index.html"><h1>WEB</h1></a>
    <!--
    1의 경우 글자색: Hello는 indigo, WEB은 blue , 둘 다 밑줄 없고 45px이고 중앙정렬
    2의 경우 글자색: WEB은 green, 밑줄 없고 45px이고 중앙정렬
    -->
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>CSS</h2>
  <p>
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
  </p>
</body>
</html>

+) 참고 글들:
https://oursmalljoy.com/css-class-selector/
https://oursmalljoy.com/css-id-selector/
https://www.codeit.kr/community/threads/3595
https://victorydntmd.tistory.com/190

4일차: ~ 박스모델

[8. 박스모델]
웹사이트 구역 선으로 나누기

  • block level element: 부모 요소의 전체 공간을 차지하여 블록을 만드는 요소 (한 라인을 독점. 너비 100%)
  • inline element: 내용 줄바꿈 없이 요소를 구성하는 태그에 할당된 공간만 (내용만큼의공간만) 차지하는 요소
    +) 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

테두리 그려보자

h1{ border-width: 5px; border-color: red; border-style: solid; }

 

/**/ CSS 주석

 

display 속성

  • 요소의 level을 변경: display:inline 또는 display:block. (그래도 요소의 카테고리와 콘텐츠 모델은 바뀌지 않는다)
  • 태그 안보이게 하기: display:none

차지 공간 관련 속성

  • width: 요소 너비 설정
  • height: 요소 높이 설정
  • border: 요소에 테두리 설정 (두께, 색상, 모양 등...)
  • padding: 테두리 안쪽 공간 설정
  • margin: 테두리 바깥쪽 공간 설정

여러 태그에 같은 스타일을 입히고 싶을 때: 선택자명 위치에 태그명 여러개 적기 (컴마로 구분)

h1, a {
border-width: 5px;
border-color: red;
border-style: solid;
}


속성 선언 시 코드 중복 없애기 (순서 안 중요함, 띄어쓰기로 구별)

h1, a { border: 5px solid red; }


웹페이지에서 마우스 오른쪽 클릭하고 "검사" 클릭
Styles: 태그가 어떠한 css스타일에 영향을 받고 있는지 알려줌

 

----

[9. 박스 모델 써먹기]
h1태그로 쓴 제목 아래에 긴 회색 가로줄을 넣는 방법
style안에 h1{ border-bottom:1px solid gray; } 했더니
여백이 불편함.. 검사 눌러 개발자 도구 선택해 박스모델을 보자

테두리 바깥쪽 주황색은 margin, 테두리 안쪽 초록색은 padding
margin:0
padding:20px

목록 태그인 ol 태그는 화면 전체를 쓰는 블록 레벨 element이다.
ol{
border-right: 1px solid gray;
width:100px;
}
이렇게 폭 조정 가능하다.

만든 두 테두리가 선이 붙지 않는다. why? ol태그 margin값 있어서. margin 0으로 해주고 적절히 padding 여백 주자.
body도 margin값 있음. 없애주자.

ol{
border-right: 1px solid gray;
width:100px;
margin:0;
padding: 20px;
}

body{
margin:0;
}

5일차: ~ 그리드

[10. 그리드 소개]
목표: 목록과 본문이 나란히 위치하는 레이아웃
<body>
  <div>NAVIGATION</div>
  <div>ARTICLE</div>
</body>

디자인이라는 목적을 위해 어떠한 의미도 없는 태그 필요해짐: div와 span

  • <div> </div> : block-level element
  • <span> </span> : inline element
<head>
  <style>
    #grid{
      border: 5px solid pink;
      display:grid;
      grid-template-columns: 150px 1fr;
    }
    div{
      border: 5px solid gray;
    }
  </style>
</head>

<body>
  <div id="grid">
    <div>NAVIGATION</div>
    <divARTICLE</div>
  </div>
</body>

 

* Can I Use https://caniuse.com/: 얼마나 많은 웹브라우저가 해당 기술을 사용하는지 알려주는 사이트

++++
추가 공부


display: grid 의미와 Grid Container, Grid Item
https://studiomeal.com/archives/533

<div class="container">  /*div.container (부모 요소)*/
	<div class="item">A</div> /*div.item (자식 요소)*/
	<div class="item">B</div>
	<div class="item">C</div>
	/*...*/
</div>

 

컨테이너에 display: grid을 설정하는 것으로 시작
.container {
display: grid;
}

그리드 형태 정의
fr: fraction, 숫자 비율대로 트랙의 크기를 나눈다 (고정 크기와 가변 크기를 섞어 사용할 수도 있다)

.container {
grid-template-columns: 200px 200px 500px;
/* grid-template-columns: 1fr 1fr 1fr */
/* grid-template-columns: repeat(3, 1fr) */
/* grid-template-columns: 200px 1fr */
/* grid-template-columns: 100px 200px auto */

grid-template-rows: 200px 200px 500px;
/* grid-template-rows: 1fr 1fr 1fr */
/* grid-template-rows: repeat(3, 1fr) */
/* grid-template-rows: 200px 1fr */
/* grid-template-rows: 100px 200px auto */
}


* repeat함수 사용: repeat(반복횟수, 반복값) 
repeat(3, 1fr 4fr 2fr); 패턴도 가능
* minmax 함수 사용
minmax(100px, auto)는 최소한 100px, 최대는 자동으로 늘어나게 하는 의미

* auto-fill과 auto-fit
repeat 함수를 쓸 때 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다
.container {
grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}
auto-fill: 셀 개수가 5개보다 모자라면 공간이 남음
auto-fit: 남는 공간을 채움

* gap, row-gap, column-gap
.container {
gap: 10px 20px;
/* row-gap: 10px; column-gap: 20px; */
}
.container {
gap: 20px;
/* row-gap: 20px; column-gap: 20px; */
}

----
[11. 그리드 써먹기]

h2태그와 p태그 어떻게 같이 묶을까? div 태그로 묶자

  • grid container: <div id="grid"> 하고 #grid{}
  • grid item: <div id="article">하고 #article{}

#grid ol{} : 조상이 grid인 ol태그 선택자
#grid #article{} : 조상이 grid인 아이디 선택자 article

<!DOCTYPE html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol{
      padding-left:33px;
    }
    #grid #article{
      padding-left:25px;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
        <h2>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
        </p>
    </div>
  </div>
  </body>
  </html>

6일차: ~ 반응형 디자인

[12. 미디어 쿼리], [13. 미디어 쿼리 써먹기]
반응형 디자인 만들기

    @media(max-width:800px){
        div{
            display:none;
        }
    }

    @media(max-width: 800px){
        #grid{
            display: block;
        }
        ol{
            border-right:none;
        }
        h1 {
            border-bottom:none;
        }
    }

<!--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title></title>
        <style>
            div{
                border:10px solid green;
                font-size:60px;
            }
            
            @media(max-width:800px){
                div{
                    display:none;
                }
            }
        </style>
    </head>
    <body>
        <div>
            Responsive
        </div>
    </body>
</html>
-->

<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom:1px solid gray;
      margin:0;
      padding:20px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol{
      padding-left:33px;
    }
    #grid #article{
      padding-left:25px;
    }
    
    @media(max-width: 800px){
        #grid{
            display: block;
        }
        ol{
            border-right:none;
        }
        h1 {
            border-bottom:none;
        }
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
        <h2>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
        </p>
    </div>
  </div>
  </body>
  </html>

7일차: ~수업을 마치며

[14. CSS 코드의 재사용]
중복을 제거하자
head 태그 안에서 style 요소 부분을 지우고 (내용은 잘라내기) link 태그를 넣는다.
<link rel="stylesheet" href="style.css">
style.css 파일을 생성하여 style 요소 안에 있던 내용을 붙여넣는다

/*230120.html*/
<!doctype html>
<html>
<head>
  <title>WEB - CSS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="230120.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
        <h2>CSS</h2>
        <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
        </p>
      </div>
  </div>
  </body>
  </html>

 

/*style.css*/
body{
    margin:0;
  }
  a {
    color:black;
    text-decoration: none;
  }
  h1 {
    font-size:45px;
    text-align: center;
    border-bottom:1px solid gray;
    margin:0;
    padding:20px;
  }
  ol{
    border-right:1px solid gray;
    width:100px;
    margin:0;
    padding:20px;
  }
  #grid{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    padding-left:33px;
  }
  #grid #article{
    padding-left:25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
      border-right:none;
    }
    h1 {
      border-bottom:none;
    }
  }

'Study > Web' 카테고리의 다른 글

[웹 공부] 생활코딩 WEB1 - HTML & Internet 강의 메모 (완강)  (0) 2023.01.04
'Study/Web' Related Articles more