CSS

김규탁·2024년 4월 10일
WEB2 CSS

TAB_WEB

목록 보기
2/2
post-thumbnail

1강

수업 소개

html만으로 만들어 준 웹 페이지를 아름답게 하는데 CSS를 사용할 것이다.

2강

CSS가 등장하기 전의 상황

링크의 색을 바꾸는 태그는 font태그이다

    <h1><a href = "index.html"><font color="red">김규탁의 음악 취향</font></a></h1>
    <ol>
        <li><a href = "1.html"><font color="red">밴드</font></a></li>  
        <li><a href = "2.html"><font color="red">힙합</font></a></li>
        <li><a href = "3.html"><font color="red">기타</font></a></li>
    </ol>

와 같이 작성하면

이렇게 다른 색깔을 표현할 수 있다.

허나 이런 코드는 효율적이지 않으며 CSS를 통해 이를 해결할 수 있다.

3강

CSS의 등장

<--무시하고자 하는 컨텐트-->

css를 사용하여 2강에서처럼 글자의 색을 바꿔보겠다.

우선 <style>이라는 태그는 HTML의 문법인 동시에 CSS언어의 문법에 맞게 해석하여 처리해야한다는 뜻을 내포한다. 디자인과 관련된 코드를 내포한다.

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

이렇게 코드를 작성하면 아까와 같은 결과를 만들어낼 수 있다.
중복을 제거한다는 점에서 굉장한 이점이 있다.

여기서 a{}는 효과(color:black;)(Declaration)를 누구에게 줄 것인지를 선택한다는 점에서 선택자(Selecter)라고 부른다.

이 방식이 더 유의미한 이유는 글자의 색을 빨강에서 검정으로 바꾸고 싶을 때 전자의 경우에는<font color="red">태그가 붙여진 모든 문장의 red를 전부 다 바꿔야 하나 이 방식으로는 color:red;의 red를 한 번만 바꿔주면 된다.

4강

CSS의 기본 문법

<style>과 같은 태그가 아닌 속성을 이용해 CSS의 범위를 나타내는 방법에는 a태그에 직접 CSS 태그를 넣는 방법이 있다. 

    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html" style="color:red">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>


웹브라우저는 CSS의 문법에 따라 해석한 결과를 style 속성이 위치하고 있는 이 태그에 적용할 것이다. 라고 적혀있다.

따라서style="color:red"
여기에서 style "" 은 HTML의 속성이며 color:red라는 CSS의 효과가 들어오는 것이다.(물론 이도 HTML이다.)

텍스트에 밑줄을 없애는 방법은

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

를 사용하면 된다.
세미콜론(;)은 디스크립션(효과)이 시작되고 끝나는 것을 구분하기 위해서 구분자로 존재한다.

또한 어느 특정한 부분에만 밑줄을 긋고 싶다면

    <h1><a href = "index.html" >김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html"style="color:red; text-decoration:underline">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>

와 같이 "color:red; text-decoration"를 a태그 뒤에 붙이면 된다.

5강

혁명적 변화

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

여기에서 color는 속성(property)를 뜻하고, red는 property value를 뜻한다.

6강

CSS 속성을 스스로 알아내기

구글에 'CSS text size property'라 검색하여 제목의 태그인 h1을 키우는 방법을 알아보았다.

    <style>
        a{
            color:black;
  			text-decoration: none;
        }
        h1 {
            font-size:60px;
        }
    </style>

font-size 속성을 이용하여 크기를 조절 할 수 있었다.

또한 가운데 정렬을 하고싶어 'CSS text center propoerty'를 검색해 font-size속성을 알아보았다.

    <style>
        a{
            color:black;
  			text-decoration: none;
        }
        h1 {
            font-size:60px;
            text-align:center;
        }
    </style>

text-align:center;를 이용하여 제목 가운데 정렬을 했다.

7강

CSS 선택자의 기본

<head>
    <title>음악 취향 - 김규탁</title>
    <meta charset ="utf-8">
    <style>
        a{
            color:black;
  			text-decoration: none;
        }
        h1 {
            font-size:60px;
            text-align:center;
        }
        .saw{
            color:gray;
        }
    </style>    
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html" class="saw">밴드</a></li>  
        <li><a href = "2.html" class="saw">힙합</a></li>
        <li><a href = "3.html">기타</a></li>

이를 통해서 class="saw"라 지정하고, style에 .saw를 작성하며(만약 그냥 saw라 작성하면 saw란 태그를 의미하는게 되어 class가 saw인 값이 아니게 된다.)점을 쓰는 이유는 이를 붙이면 class가 saw인 태그를 가르키게 만드는 기호이기 때문이다.

만약 두 번째 목차인 '힙합'만 빨강색으로 표현하고 싶으면

		.active{
        	color:red;
        }
				...
        <li><a href = "2.html" class="saw active">힙합</a></li>

처럼 class를 지정하고 style내에 빨강색을 추가하면 된다.

이를 통해 class라는 속성의 값은 여러 개의 값이 들어올 수 있고, 띄어쓰기로 구분되며 하나의 태그에 여러가지 속성이 들어올 수 있다. 또한 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다.

style내의 항목들에서 가장 마지막에 등장하는 명령이 가장 큰 영향력을 갖는다.
더 우선순위가 높은 ID 선택자를 사용할 수 있다.

head>
    <title>음악 취향 - 김규탁</title>
    <meta charset ="utf-8">
    <style>
        a{
            color:black;
  			text-decoration: none;
        }
        h1 {
            font-size:60px;
            text-align:center;
        }
        .saw{
            color:gray;
        }
        #active{
            color:red;
        }
    </style>    
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html" class="saw">밴드</a></li>  
        <li><a href = "2.html" class="saw" id="active">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>

이런식으로 ID 선택자를 사용할 수 있다.
우선순위를 두면 ID선택자>Class 선택자>태그 선택자이다.
ID는 다른 선택자와 달리 중복되어서는 안된다.

8강

박스 모델

링크는 줄 바꿈을 잘 하지 않는다
링크를 거는 다른 방법으로는
<a href="홈페이지 주소">Css</a>
로도 걸 수 있다.

CSS에서는 /*/을 주석으로 이용한다.

화면전체를 쓰는 것을 block level element라고 하고,
자신의 부분만큼을 쓰는 태그는 inline level element라고 한다.

태그들을 안 보이게 하고 싶을 땐 display:none;를 사용한다.

<head>
    <style>
    <meta charset ="utf-8">    
        h1{
            border-width:5px;
            border-color:red;
            border-style: solid;
        }
        a{
            border-width:5px;
            border-color:red;
            border-style: solid;
        }
    </style>
</head>

여기서 중복을 제거하고자 하면,

<head>
    <meta charset ="utf-8">
    <style>
        h1, a{
            border-width:5px;
            border-color:red;
            border-style: solid;
        }
    </style>
</head>

이런식으로 표현할 수 있다.

또 이를 더 줄일 수 있다

<head>
    <meta charset ="utf-8">
    <style>
        h1, a{
            border:5px solid red;
            }
    </style>
</head>

로 줄일 수 있고

모두 이렇게 웹페이지에 나타난다.

    <style>
        
        
        h1{
            border:5px solid red;
            padding:20px;
        }
    </style>

여기서 padding은 박스와 텍스트 사이의 간격을 조절하는 속성이다.
margin:20px;은 박스와 박스 사이의 간격을 조절하는 속성이다.
h1처럼 화면 전체를 쓰는 특징을 바꿀 땐 width:100px;를 사용해 폭을 조절할 수 있다.

9강

박스 모델 써먹기

<!doctype html>
<html>

<head>
    <title>음악 취향 - 김규탁</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;
        
        }
    </style>    
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <ol>
        <li><a href = "1.html">밴드</a></li>  
        <li><a href = "2.html">힙합</a></li>
        <li><a href = "3.html">기타</a></li>
    </ol>


        <h2>힙합</h2>
    김규탁은 힙합을 즐겨 듣는다. 어렸을 적 Tv 프로그램을 통해 접한 힙합에 흥미를 느낀 그는 이런 저런 힙합음악을 들으며 장르 내의 스펙트럼을 넓혀 나갔고, 시간만 빈다면 새로 나오는 이름있는 아티스트의 정규 앨범은 챙겨 듣는다고 한다.  또한 이번 힙합 플레이야 페스티벌에 갈 예정이며, 그가 가장 사랑하는 아티스트인 씨잼이 페스티벌의 일정에 없어 슬프다고 한다.
    </p></body></html>

위에서 배운 박스모델을 통해 웹사이트를 대략적으로 만들어보았다.

10강

그리드 소개

<div>태그는 <h1>처럼 제목과 같은 의미가 있는게 아니라 아무런 의미도 기능도 없고 단지 디자인 용도로만 쓰는 태그이다. 화면 전체를 사용한다(block level element).
<span>태그는 div 태그와 같으나 in line element을 사용한다.

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">

    <title></title>
    <style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 2fr 1fr;
        }
        div{
            border:5px solid gray;
        }
    </style>

    </head>
    <body>
        <div id = "grid">
        <div>NAVIGATION</div> 
        <div>아 졸려 졸려 너무 졸려 무슨 말을 써야하지? 몰?루 나 그냥 집 가고싶어 사실 그렇진 않아 집에 가더라도 이산수학 과제와 영어 과제가 나를 기다리니깐</div>
    </body>
</html>

www.caniuse.com 을 통해 현재 웹 브라우저들이 얼마나 특정한 기술을 사용하는지를 알 수 있다.

11강

그리드 소개

#grid ol{

}

와 같이 표현하면<ol>은 웹페이지에 있는 모든 <ol>중에 부모가 #grid인 태그를 선택하는 선택자가 되는 것이다.

12강

미디어 쿼리 소개

반응형 디자인은 화면의 크기에 따라서 웹페이지들의 각 요소들이 반응하여 동작하게 된다는 것이다.

개발자 도구에서 검사를 누르면 다음에 오른쪽 위에 화면의 크기가 표시된다.

어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 미디어 쿼리이다.

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

를 통해 최대 픽셀값이 800픽셀이고 그 아래로 가면 페이지에 아무것도 뜨지 않게 만들 수 있었다.

13강

미디어 쿼리 써먹기

        @media(max-width:800px){
            #grid{
                display: block;
            }
        }

를 통해 800픽셀 이하로 내려가면 페이지의 본문이 오른쪽 파트 아래로 내려가도록 하였다.


            ol{
            border-right:none;
            }
            h1 {
            border-bottom:none;
            }

을 추가해 800픽셀보다 작아질 때 선들이 없어지도록 하였다.

14강

CSS 코드의 재사용

2.hdml에 적용했던 style과 다른 태그등을 다른 에디터에 옮기려면 일일히 다 옮겨야한다. 따라서 중복의 제거가 중요하다. 

<!doctype html>
<html>

<head>
    <title>음악 취향 - 김규탁</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">김규탁의 음악 취향</a></h1>
    <div id = "grid">
        <ol>
            <li><a href = "1.html">밴드</a></li>  
            <li><a href = "2.html">힙합</a></li>
            <li><a href = "3.html">기타</a></li>
        </ol>

        <div id = "article">
            <h2>힙합</h2>
            김규탁은 힙합을 즐겨 듣는다. 어렸을 적 Tv 프로그램을 통해 접한 힙합에 흥미를 느낀 그는 이런 저런 힙합음악을 들으며 장르 내의 스펙트럼을 넓혀 나갔고, 시간만 빈다면 새로 나오는 이름있는 아티스트의 정규 앨범은 챙겨 듣는다고 한다.  또한 이번 힙합 플레이야 페스티벌에 갈 예정이며, 그가 가장 사랑하는 아티스트인 씨잼이 페스티벌의 일정에 없어 슬프다고 한다.
            </p></body></html>
        </div id= "article">  
    </div>

style 태그 내에 있는 모든 문자를 복사하여 style.css로 새로운 파일을 만들어 옮긴 후 <link>태그를 사용하여 원래 있던 자리에 넣는다.
그러면

<style>{

.....

}

의 내용을

    <link rel ="stylesheet" href = "/css/master.css">

로 연결(link)하여 중복을 줄일 수 있다.
1.html은 style.css와 link 되어있으며 웹브라우저는 style.css 파일을 다운로드 받아서 그것을 이 웹페이지에 적용하게 될 것이다.

<!doctype html>
<html>

<head>
    <title>음악 취향 - 김규탁</title>
    <meta charset ="utf-8">
    <link rel ="stylesheet" href = "style.css">
</head>

<body>
    <h1><a href = "index.html">김규탁의 음악 취향</a></h1>
    <div id = "grid">
        <ol>
            <li><a href = "1.html">밴드</a></li>  
            <li><a href = "2.html">힙합</a></li>
            <li><a href = "3.html">기타</a></li>
        </ol>

        <div id = "article">
            <h2>힙합</h2>
            김규탁은 힙합을 즐겨 듣는다. 어렸을 적 Tv 프로그램을 통해 접한 힙합에 흥미를 느낀 그는 이런 저런 힙합음악을 들으며 장르 내의 스펙트럼을 넓혀 나갔고, 시간만 빈다면 새로 나오는 이름있는 아티스트의 정규 앨범은 챙겨 듣는다고 한다.  또한 이번 힙합 플레이야 페스티벌에 갈 예정이며, 그가 가장 사랑하는 아티스트인 씨잼이 페스티벌의 일정에 없어 슬프다고 한다.
            </p></body></html>
        </div id= "article">  
    </div>

훨씬 짧아진 것을 체감할 수 있다.

15강

수업을 마치며

공부한 것을 최대한 써먹자!

profile
김규탁
이전 포스트

HTML & Internet

0개의 댓글