Day3

mh·2021년 11월 3일

CSS html 멋쟁이사자처럼 제주코딩베이스캠프 프론트엔드

멋쟁이사자 프론트엔드 1기

목록 보기

2/12

CSS 달리기🏃‍♂️

오늘 배운 CSS Selector 부분이 헷갈려서 적어본다.
그리고 css가 안먹혀서 티스토리로 옮길까 했는데
계정만들기가 귀찮아서 그냥 하기로 했다.🤪

INDEX
1. Eric A. Meyer 의 reset.css
2. CSS 적용방식 (@import 와 link의 차이점)
3. 선택자 (CSS Selector)

1. 에릭마이어의 reset.css

Reset.css
말 그대로 css를 리셋시켜주는 역할을 한다. 브라우저 마다 다른 마진으로 인해 생기는 요소 불일치를 줄여주는것이 목적이며, 문자, 헤딩, 라인높이 값 등을 0으로 리셋시켜준다.

meyerweb.com | CSS Tools: Reset CSS
참고로 이분의 저서 중 'CSS 완벽 가이드'(CSS: The Definitive Guide: Visual Presentation for the Web)란 책도 있다고 한다. CSS 문법 뿐만 아니라 관련 히스토리도 같이 알 수 있다고 한다. 무려 1260페이지라고 한다! 디스코드 채널에 있던 분의 표현을 빌리자면...

<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>

2. CSS 적용방식 (@import 와 link의 차이점)

내부 CSS

<style>
      p{
        font-size: 16px;
        font-weight: 400;
        color: blue;
        }
</style>

link 방식

<head>
<link rel="stylesheet" href="#.css">
</head>

@import 방식

<style>
@import url("#.css");
</style>

inLine 방식

<body>
   <h1 style="color: red;">Hello World<h1>
<body>

link방식과 @import방식의 차이점

멘토님께서 이렇게 답변해주셨다.

즉,@import 방식은 비교적 최신문법이라 구형 브라우저나 엣지에서 버그가 발생할 수 있다고 한다.
스택 오버플로우에는 이런 답변이 있는데 나중에 따로 포스팅해도 재미있을 것 같다.
Stack Overflow | Difference between @import and link in CSS

3. 선택자 (CSS Selector)

1. Type

전체 선택자 [ * ] reset.css 같이 특수한 상황에 사용

  *{
   margin: 0;
   padding: 0;
   }

태그 선택자 (태그 이름) p, h, body 등등

  p{
  text-size: 16px;
  color: red;
  }

2. Class

한 페이지 안에 여러개가 존재할 수 있다.

<head>
    
    <title>css class</title>

    <style>

        .one {
            color: aqua;
        } 

        .two {
            border: solid 1px black;
            border-top-color: red;
        }

        .three {
            font-size: 48px;
        }
    </style>



</head>
<body>

    <!--

        1. calss는 중첩해서 사용할 수 있다. 반면 id는 중첩해서 사용할 수 없습니다.
        2. page 내 class는 여러개 존재해도 됩니다. 반면 id는 유일해야 합니다.

    -->
    
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1 class="one">hello world</h1>
    <h1 class="two three">hello world</h1>
    <h1 class="two">hello world</h1>   
</body>

실행화면

3. id

한페이지에 단 하나만

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css class</title>

    <style>

        #one {
            color: aqua;
        } 

        #two {
            border: solid 1px black;
            border-top-color: red;
        }

        #three {
            font-size: 48px;
        }



    </style>



</head>
<body>

    <!--

        1. id는 중첩해서 사용할 수 없습니다. 반면 class는 중첩해서 사용할 수 있습니다.
        2. page내 id는 유일해야 합니다. 반면 class는 여러개 존재해도 됩니다.

    -->
    <a href="#one">클릭하세요!</a>
    
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1 id="one">hello world</h1>
    <h1 id="two three">hello world</h1>
    <h1 id="two">hello world</h1>   
</body>

실행화면

4. 하위 선택자 / 자식 선택자

classA classB {declarations;} classA안의 classB라는 선택자
classA>classB {declarations;} ClassA 바로 밑의 ClassB 선택자


    <title>selector</title>
    <style>
        ul p {           /*요소 안의 선택자*/
            color: red;
        }
        
        li > p {         /*li 바로밑의 p*/
            color: blue;
        }
    </style>
       
<body>
    
     <ul>
        <li>
            <p>hello world</p>
        </li>
        <li>
            <div>
                <div>
                    <div>
                       <p>hello world</p> 
                    </div>
                </div>
            </div>
        </li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
</body>
</html>

5. 인접 형제 선택자


    <style>
        h1+ ul {           /* h1 태그 옆의 ul 태그에 적용 (형재태그)*/
            color: red;
        }

    </style>

<body>
    <h1>hello world</h1>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

</body>

6. 일반 형제 선택자

선택자 사이에 ~ 를 사용하여 나타낸다
~를 기준으로 앞 요소 이후 나오는 모든 요소를 선택한다.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        h1 ~ ul {           /* ~을 기준으로 앞요소 이후에 있는 모든 뒤 요소 선택 */
            color: red;
        }

    </style>
</head>
<body>
    <h1>hello world</h1>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>
    
    <ul>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

</body>
</html>

7. 헷갈리는 선택자*

"공백"을 이용한 하위선택자와 여러개의 클래스가 할당된 요소를 헷갈리지 말자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>헷갈리는 선택자</title>

    <style>
        .one .two {  /*one 바로 아래 있는(자손) two 선택*/
            color: blue;
        }
        .one.two {  /*one 안에 포함되어 있는 two 선택*/
            color: red;
        }


    </style>

</head>
<body>

    <!-- .one
    .one.two 
    .one>.two -->


    <div class="one">hello world</div>
    
    <div class="one two">hellow world</div>
    <div class="one">
        <div class="two">hello world</div>
    </div>

</body>
</html>

실행화면

8. 속성 선택자

태그, class, id 명 외에도 속성으로 접근할 수 있으며 이를 속성선택자라 부른다.
input[type="text"] input 엘리먼트 중 type 속성의 값이 text인 엘리먼트 선택

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    
    <style>

        a[href] {
            font-size: 32px;
        }

        a[href="http://velog.io"] {
            font-size: 48px;
        }
            



    </style>

</head>
<body>
    <a href="#">어디로모실까요?</a>
    <a href="http://velog.io">벨로그</a>
    <a>벨로그로갑시다</a>
</body>
</html>

실행화면

헷갈리는 속성 선택자 모음
태그[속성이름]~="변수"
태그[속성^="변수"] -> 예제 만들어야 함
태그[속성$="변수"]
태그[속성*="변수"]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 선택자</title>
    
    <style>

       

        a[href="http://www.paullab.co.kr"] {
            font-size: 48px;
        }
            
        a[href~="paullab"] {   /*href 안의 변수의 단어를 포함하는 태그를 선택*/
            color: turquoise;
            font-weight: normal;
        }

        a[href~="naver"] {   
            color: turquoise;
            font-weight: normal;
        }
        
        a[href*="paullab"] { /*속성의 속성값이 변수의 문자열을 포함하는 태그를 선택*/
            color: red;
            font-weight: bold;
        }

        a[href$=".pdf"] { /* 속성값이 변수(여기서는 ".pdf") 로 끝나는 요소 연결 */
            font-size: 100pt;
        }



    </style>

</head>
<body>
    <a href="#">클릭해!</a>
    <a href="http://www.paullab.co.kr">클릭해!</a>
    <a href="asd.pd">클릭해!</a>
    <a href="asd.pdf">클릭해!</a>
    <a href="naver">클릭하란마리양</a>
    <a href="www.naver.com">클릭하란마리양</a>
    <a>클릭해!</a>
</body>
</html>

실행화면

오늘은 일단 여기까지!

가상 선택자 이해를 잘 못했는데 다음에 꼭 정리해야겠다!
하루만에 진도가 많이 나가서 정신이 없다...

🤪🤪🤪🤪🤪

이전 포스트

Day 2

다음 포스트

Day3

멋쟁이사자 프론트엔드 1기

CSS 달리기🏃‍♂️

1. 에릭마이어의 reset.css

2. CSS 적용방식 (@import 와 link의 차이점)

link방식과 @import방식의 차이점

3. 선택자 (CSS Selector)

1. Type

2. Class

3. id

4. 하위 선택자 / 자식 선택자

5. 인접 형제 선택자

6. 일반 형제 선택자

7. 헷갈리는 선택자*

8. 속성 선택자

오늘은 일단 여기까지!

Day 2

Day 4

0개의 댓글