멋사_프론트엔드스쿨_TIL_3day

Don't forget the code for your dream! ·2021년 11월 3일

CSS tag 프론트엔드 프론트엔드스쿨

멋쟁이사자처럼_ 프론트엔드스쿨_ TIL ✏️

목록 보기

5/30

3day!!

Today's Tip

맥 단축키 때문에 아주 도라방스
- option + double click 전체선택
- option + w tag 감싸기 (Extansion htmltagwrap)
- cmd + delete : 한줄 삭제
strong better than b
section 밑에는 <heading> 넣어주기

1) Adrress & tel: href에 주소/tel 기입 시 각각 앞에 mailto: 와 tel:을 넣어줘야 연결이 됨

<address>
            
            <p>
                06628 서울특별시 서초구 강남대로 311 드림플러스 강남 1016호
            </p>
            <a href="mailto:hi@kstartupforum.org">
                hi@kstartupforum.org 
                
            </a>
            <a href="tel:02-6211-940">02-6211-9400</a>
        </address>

2) radio 에서 checked 되어 있어야 한개만 선택가능함 (ex) 남, 여

<label>
  <input type="radio" name="terms1">
  <span>약관에 동의합니다</span>
</label>
<label>
  <input type="radio" name="terms1" checked>
  <span>약관에 동의하지 않습니다.</span>
</label>

3) fieldset & placeholder

<fieldset>
<legend>이용약관</legend>
<strong>이용약관 내용</strong>
<div>
 약관내용<br>

/* 필수입력 사항에 대하여 사용*/
<li>
<label for="member_name">이름</label>
<input type="text" required placeholder="실명을 입력해주세요" id="member_name">
 </li>

4) Table tag, (*~~_숫자는 오른쪽 정렬_~~* 🦁)

th (Table heading) / td (Table date) / tr (Table row)


/* border-collapse: 충돌되는 부분 제거 해서 줄 1개로 나옴 */
<style>
        table, tr, th, td {
            border: solid 1px black;
            border-collapse: collapse;
        }
    </style>

<!-- table>(tr>th*3)+(tr>td*3)*3 -->
    <table>
    <thead>
        <tr>
            <th>구분</th>
            <th>책 이름</th>
            <th>책 가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>hello1</td>
            <td>1000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>hello2</td>
            <td>2000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>hello3</td>
            <td>3000</td>
        </tr>
    </tbody>
    </table>

<!-- colspan(옆으로 병합) / rowsapn (세로로 병합)-->
   <tfoot>
         <tr>
            <td colspan="3">총 판매량</td>
            <td>6</td>
        </tr>
   </tfoot>

<!-- <thead> <tbody> <tfoot>--> 
 → JS에서 쓰이므로 tabled 사용할 때 꼭 넣어주기

	<!-- 표의 설명 또는 제목 -->
<caption> 설명 </cpation>

<!-- 그룹 구분, 구분지어서 css 가능 -->
<colgroup> 
<col class = "구분">
<col class = "이름">
<col class = "가격">
<col class = "판매량">
</colgroup>

5) scope 속성

scope  col span 다시 보기!

[CSS]

1. CSS 적용하기

a) Internal : HTML 내부에 <style> 삽입

b) External style sheet:
(1) main.css file 생성
(2) HTML 내부에 <link rel = "stylesheet" href="main.css"> 삽입해서 연결

c) at-rule _ @ CSS 안에 CSS 넣기

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

d) Inline CSS

<h1 style="color: red;">

2. Reset CSS

초기화 사이트

-모든 CSS를 초기화 한 뒤에 css 작업

3. Selector

.one, .two

.one .two

4-1. 태그[속성이름="변수"]

속성이름 의 속성값이 변수와 일치하는 태그를 선택

a[href="<http://www.paullab.co.kr>"] {
    font-size: 32px;
}

4-2. 태그[속성이름~="변수"]

속성이름 의 속성값이 변수 를 포함하는 태그를 선택 (단어)

a[href~="paullab"] {
    color: black;
}

4-3. 태그[속성이름]

속성이름에 해당되는 속성 가진 모든 태그 선택

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

4-4. 태그[속성$="변수"]

속성 의 속성값이 변수 로 끝나는 요소를 선택합니다.

a[href$="kr"]{
    color: black;
}

a[href$=".pdf"]{
    color: black;
}

4-5. **태그[속성*="변수"]**

속성 의 속성값이 변수 를 포함하는 태그를 선택합니다. (문자열)

a[href*="paul"] {
	  color: black;
}

** ~~도라방스 방지~~🤯

<a href="http://www.paullab.co.kr"></a>

↓↓
여기서 href의 속성값은 "http://www.paullab.co.kr/"

문자열 자체이기 때문에 특정 속성명을 가진 요소를 찾는 ~= 에서는 선택되지 않음.
~=로 선택하기 위해서는 a[href~="http://www.paullab.co.kr/"]

이렇게 입력해야 함.

a[class="paul"] : a태그이면서 class명이 paul인 요소

(paul 클래스 하나만 가지고 있는 a 태그 ex: )

a[class~="paul"] : a태그이면서 class명 paul을 가지고 있는 요소
a[class*="paul"] : a태그이면서 class명에 paul을 포함하고 있는 요소

5. 가상 클래스 선택자

<title>가상 클래스 선택자</title>
    <style>
        /* 홀수번째  */
        .food:nth-child(odd) {
            color: red;
        }
    </style>
</head>
<ul>
    <li class="food">1</li>
    <li class="food">2</li>
    <li class="food">3</li>
    <li class="food">4</li>
    <li class="food">5</li>
</ul>

6. 가상요소 선택자

<style>
        input:focus {
            color: royalblue;
        }

        input:hover {
            color: rosybrown;
        }

        /* 누르는 순간부터 떼는 순간까지 */
        input:active {
            color: sandybrown;
        }
    </style>
</head>

<body>
    <form action="./index.html" method="get">
        <label for="id">ID</label>
        <input type="text" id="id" name="id">
        <label for="pw">PW</label>
        <input type="password" id="pw" name="pw">

    </form>
</body>


  <html>

input:disabled +  span {
color: green }

→ input뒤의 span 이 영향받는 것!! 

label + input:checked+ span

p::after {
    content: 'cm'
}

7. 부정선택자

<!-- 부정선택자 ul>li.one*5_ 아닌 것만 선택해라!-->

<style>
    li:not(.one){
        color: red;
       }
</style>

<ul>
    <li class="one">Hello</li>
    <li class="one">Hello</li>
    <li class="two">Hello</li>
    <li class="one">Hello</li>
    <li class="one">Hello</li>
</ul>

8. 우선순위 계산

id > class > tag

id : id 선택자는 100점
class, 가상클래스 선택자 : class, 가상클래스 선택자는 10점
요소, 가상요소 선택자 : 요소, 가상요소 선택자는 1점

<title>선택자 우선순위</title>
    <style>
        h1 {color: red}
        .yellowgreen {color: yellowgreen}
        #four {color: skyblue}
    </style>
</head>
<body>    
    <h1>h1의 첫번째</h1>
    <h1 id='two' class='yellowgreen'>h1의 두번째</h1>
    <h1 id='three' class='yellowgreen'>h1의 세번째</h1>
    <h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>
</html>

9. Declarations

1) 고정크기 단위

2) 가변크기 단위

%는 부모의 절반

<!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>
        html, body {
            font-size: 20px;
        }

        p {
          font-size: 2em;
          font-weight: 700;
        }

        div {
            font-size: 2em;
        }

        .one {
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <p>hello world</p>
    <!-- em, %, rem, vw, vh -->
    <div>
        <!-- 10px * 2 = 20px -->
        <div>
            <!-- 20px * 2 = 40px -->
            <div>
                <!-- 40px * 2 = 80px -->
                hello world
            </div>
        </div>
    </div>

    <div>
        <!-- 10px * 2 = 20px -->
        <div>
            <!-- 20px * 2 = 40px -->
            <div class="one">
                <!-- 40px * 2 = 80px -->
                hello world
            </div>
        </div>
    </div>
</body>
</html>

Memoir

단축키가 익숙치 않아서 초반에 많이 더듬었다.
우선순위 계산이 헛갈려서 다시 공부해야겠다.

오전에 과제에 대한 코드리뷰..? 진행하셨는데,
참 좋았다.

시멘틱 구조는 여전히 어렵다,,

다들 정-말 열심히 한다.
디스코드 알람에 자극을 받네,,, 후후

내일도 새벽같이 일어나 달리고 복습해야지!

여담이올시다

다들 어쩜 그릏케 올빼미형인지,,
대다수가 밤늦게까지 (새벽까지) 공부한다.
나는 할매라 열시면 꿈나라인데...

새벽에 일어나 보면
올빼미들의 전날의 업적을 보고 헉! 할 때가 많다.
뒤쳐진 너낌 😅 혼자 숙제를 안한 느낌 ... 쌔하다-💣
새벽반을 모집해봐야겠다...

Don't forget the code for your dream!

이전 포스트

🦁멋사_프론트엔드스쿨_TIL_2day

다음 포스트

멋사_프론트엔드스쿨_TIL_3day

멋쟁이사자처럼_ 프론트엔드스쿨_ TIL ✏️

3day!!

[CSS]

1. CSS 적용하기

2. Reset CSS

3. Selector

4-1. 태그[속성이름="변수"]

4-2. 태그[속성이름~="변수"]

4-3. 태그[속성이름]

4-4. 태그[속성$="변수"]

4-5. **태그[속성*="변수"]**

5. 가상 클래스 선택자

6. 가상요소 선택자

7. 부정선택자

8. 우선순위 계산

9. Declarations

Memoir

🦁멋사_프론트엔드스쿨_TIL_2day

멋사_프론트엔드스쿨_TIL_4day

0개의 댓글

멋사_프론트엔드스쿨_TIL_3day

멋쟁이사자처럼_ 프론트엔드스쿨_ TIL ✏️

3day!!

[CSS]

1. CSS 적용하기

2. Reset CSS

3. Selector

4-1. 태그[속성이름="변수"]

4-2. 태그[속성이름~="변수"]

4-3. 태그[속성이름]

4-4. 태그[속성$="변수"]

4-5. 태그[속성*="변수"]

5. 가상 클래스 선택자

6. 가상요소 선택자

7. 부정선택자

8. 우선순위 계산

9. Declarations

Memoir

🦁멋사_프론트엔드스쿨_TIL_2day

멋사_프론트엔드스쿨_TIL_4day

0개의 댓글

4-5. **태그[속성*="변수"]**