[새싹X코딩온] 풀스택 1주차 회고록 - 2

h1:hover {
    color: red;
}

a:active {
    background-color: blue;
}

input:focus {
    background-color: orange;
}

div.stripes > *:nth-child(2n-1) {
    background-color: navy;
    color: white;
    width: 300px;
}

div.stripes > *:nth-child(2n) {
    background-color: yellow;
    width: 300px;
}

개인적으로 개발하면서 부족했던게 HTML과 CSS를 등한시 했던 것이다.

필요할 때 긁어와서 썻는데 옵션이나 구조를 잘 이해하지 못하고 썻던 것.. 이번 기회를 통해 제대로 체득하도록 해야겠다.

Tip. 영어 용어를 잘 기억해 두자

코딩 자체가 영어기반이기 때문에 여유가 생긴다면 미뤄뒀던 영어공부를 할 생각이다 ㅠ

HTML ( Hyper Text Markup Language )

마크업 언어 구조로 웹 페이지를 구성하는 기초언어

구성요소

1. 빈 요소

2. 블록 요소

- 기본적으로 부모 요소의 전체 너비(100%)를 차지함.

- 태그가 시작되면 개행이 일어남.

- 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함.

3. 인라인 요소

- 텍스트, 이미지 크기에 맞는 필요한 공간만을 차지하는 요소

- 너비와 높이 지정 X

- 블록 요소 안에 포함되어 있는 것, 인라인 요소만 가질 수 있다.

태그 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color: blue;">메가커피</h1>
        <ul>
            <li>
                <h2>아메리카노</h2>
                <ol>
                    <li>R: 3000won</li>
                    <li>L: 3500won</li>
                </ol>
            </li>
            <li>
                <h2>카페라떼</h2>
                    <ol>
                        <li>R: 3000won</li>
                        <li>L: 3500won</li>
                    </ol>
            <li>
                <h2>망고스무디</h2>
                    <ol>
                        <li>R: 3000won</li>
                        <li>L: 3500won</li>
                    </ol>
            </li>
            <li>
                <h2>딸기쥬스</h2>
                    <ol>
                        <li>R: 3000won</li>
                        <li>L: 3500won</li>
                    </ol>
            </li>
            <li>
                <h2>수박쥬스</h2>
                    <ol>
                        <li>R: 3000won</li>
                        <li>L: 3500won</li>
                    </ol>
            </li>
        </ul>
    <hr>
    <h2>음료 설명</h2>
    <p>아메리카노는 <b>물</b>에 에스프레소 샷을 탄 음료입니다.</p>
    <p>카페라떼는 <b>우유</b>에 에스프레소 샷을 탄 음료입니다.</p>
    <p>망고 스무디는 <b>망고</b>를 얼음에 간음료 입니다.</p>
    <p><b>딸기</b> 쥬스는 딸기 쥬스</p>
    <p><b>수박</b> 쥬스는 딸기 쥬스</p>
</body>
</html>

설문조사 폼 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>설문조사</title>
</head>
<body>
    <h1>설문조사</h1>
    <form action="">
            이름 <input type="text">
            <br>
            이메일 <input type="email" placeholder="abcd@abcd.com">
            <br>
            <h5>나이</h5>
            <input type="radio" name="age" value="10" checked id="10"><label for="10">10대</label>
            <input type="radio" name="age" value="20" id="20"><label for="20">20대</label>
            <input type="radio" name="age" value="30" id="30"><label for="30">30대</label>
            <input type="radio" name="age" value="40" id="40"><label for="40">40대</label>
            <input type="radio" name="age" value="50" id="50"><label for="50">50대</label>
            <input type="radio" name="age" value="60" id="60"><label for="60">60대 이상</label>
            <br>
            <h5>원하는 강의 ( 복수 응답 가능 )</h5>
            <input type="checkbox" name="lang" value="html" checked id="html"><label for="html">html</label>
            <input type="checkbox" name="lang" value="js" id="js"><label for="js">javascript</label>
            <input type="checkbox" name="lang" value="css" id="css"><label for="css">css</label>
            <br>
            <textarea name="answer" cols="50" rows="10" placeholder="하고 싶은 말을 써주세요."></textarea>
            <button type="submit">제출</button>
    </form>
</body>
</html>

Semantic Tag

웹 페이지를 만들 때 div 태그만을 사용하기보단 semactic tag를 사용해주는 것이 좋다
개발할 때 코드 수정에 용이하기 때문이다.
SEO 검색 최적화
검색엔진은 html 코드를 분석해서 사이트를 노출시킨다
크롤러가 페이지의 구성요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다.
유지 보수성
페이지를 유지보수 할 때 div 태그만 가득하다면 요소를 찾기 힘들다.

table

테이블은 기본적으로 아래와 같은 구조로 이루어 진다.

<table>

<tr>

<tr>

</table>

<table> 속성

border : 테두리 두께
cellspacing : 테두리 간격 사이의 너비
cellpadding : 셀 내부의 간격
align : 테이블 정렬 속성
width 와 height : 테이블의 너비와 높이
bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

<td> 속성

colspan : 해당 칸이 점유하는 열의 수 지정
rowsapn : 해당 칸이 점유하는 행의 수 지정

테이블 속성은 이정도만 알아두고 필요한 건 찾아서 쓰도록 해야겠다.

테이블 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 실습</title>
</head>
<body>
    <table border="1" align="center" cellspacing="0" cellpadding="10" bordercolor="white">
        <caption>
            <h3 style="color:green">2023년 7월</h3>
        </caption>
        <tr>
            <td style="color: red;">일</td>
            <td>월</td>
            <td>화</td>
            <td>수</td>
            <td>목</td>
            <td>금</td>
            <td>토</td>
        </tr>
        <tr>
            <td colspan="6"> </td>
            <td style="color: blue;"> 1</td>
        </tr>
        <tr>
            <td style="color: red;">2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td style="color: blue;">8</td>
        </tr>
        <tr>
            <td style="color: red;">9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td style="color: blue;">15</td>
        </tr>
        <tr>
            <td style="color: red;">16</td>
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td style="color: blue;">22</td>
        </tr>
        <tr>
            <td style="color: red;">23</td>
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td style="color: blue;">29</td>
        </tr>
        <tr>
            <td style="color: red;">30</td>
            <td colspan="5">31</td>
        </tr>
    </table>
    <hr>
    <br>
    <table border="1" align="center" cellspacing="0" cellpadding="5" bordercolor="none">
        <caption style="color: blue; font-size: 30px;">
            시간표
        </caption>
        <tr style="color: red;">
            <td></td>
            <td>월</td>
            <td>화</td>
            <td>수</td>
            <td>목</td>
            <td>금</td>
        </tr>
        <tr>
            <td style="color: green;">1교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
        <tr>
            <td style="color: green;">2교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
        <tr>
            <td style="color: green;">3교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
        <tr>
            <td style="color: green;">4교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
        <tr>
            <td colspan="6">
                <a href="https://www.youtube.com/watch?v=OOfY-3oGprc">
                    <img src="img/marvel.svg" alt="" width="300">
                </a>
            </td>
        </tr>
        <tr>
            <td style="color: green;">5교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
        <tr>
            <td style="color: green;">6교시</td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
            <td><img src="img/dog.jpeg" alt="강아지" width="50"></td>
        </tr>
    </table>
    <hr>
    <br>
    <table border="1" align="center" cellspacing="0" cellpadding="5" bordercolor="none">
        <tr>
            <td>구분</td>
            <td>구분</td>
            <td>가격</td>
            <td>이미지</td>
        </tr>
        <tr>
            <td rowspan="2">커피류</td>
            <td>아메리카노</td>
            <td>4200원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=110563"><img src="img/아메리카노.jpeg" width="100" alt=""></a></td>
        </tr>
        <tr>
            <td>돌체라떼</td>
            <td>4800원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=128692"><img src="img/돌체라떼.jpeg" width="100"></a></td>
        </tr>
        <tr>
            <td rowspan="2">주스류</td>
            <td>자바칩 프라푸치노</td>
            <td rowspan="2">5000원</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=168066"><img src="img/자바칩.jpeg" width="100"></a></td>
        </tr>
        <tr>
            <td>녹차 프라푸치노</td>
            <td><a href="https://www.starbucks.co.kr/menu/drink_view.do?product_cd=9200000002502"><img src="img/녹차.jpeg" width="100"></a></td>
        </tr>
    </table>
    <hr>
    <br>
    <table border="1" align="center" width="300" height="300" cellspacing="0" cellpadding="5" bordercolor="none">
        <tr align="center">
            <td colspan="2">1</td>
            <td rowspan="2">2</td>
        </tr>
        <tr align="center">
            <td rowspan="2">3</td>
            <td>center</td>
        </tr>
        <tr align="center">
            <td colspan="2">4</td>
        </tr>
    </table>
</body>
</html>

CSS ( Cascading Style Sheet )

웹 페이지를 디자인하기 위해 사용하는 style 언어

Cascading 이란
상위 요소에서 지정한 스타일이 하위 요소까지 연속적으로 사용된다
( 모든 속성이 cascading 되진 않음 )
Html
부모 - > 자식 ( 계층 구조 )

CSS 참조방식

인라인
- 각 요소 스타일 속성에 전부 스타일을 직접 적어줘야함
- 직관적임
- 재사용 불가

내장 방식

링크
- 모든 스타일을 하나의 css 파일에 넣고, 필요한 html 파일에서 해당 파일을 링크해서 사용하는 방식

Selector 선택자

스타일을 적용하고자 하는 Html 요소를 선택하기 위해 Css에서 제공하는 수단

Property 속성

{ } 안에 속성 값을 지정하여 다양한 스타일을 정의
여러 개의 속성을 연속해서 지정할 수 있으며 세미콜론( ; )으로 구분

Value 값

해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정

class, id 의 차이

class : 그룹
id : 고유

복합 선택자

하위 선택자

자식 선택자 ( > )

인접 형제 선택자 ( + )
A 뒤에 있는 B 하나
A 뒤에 바로 B의 요소가 있어야 적용이 가능하다 C가 있다면 적용이 안됨.

일반 형제 선택자 ( ~ )
A 뒤에 있는 B는 다

CSS에서 사용 가능한 색상들

https://developer.mozilla.org/ko/docs/Web/CSS/color_value

<color> - CSS: Cascading Style Sheets | MDN

CSS <color> 자료형은 색을 나타냅니다. <color>는 이 색이 배경과 어떻게 합성되어야 하는지 나타내는 알파 채널 투명도 값도 가질 수 있습니다.

developer.mozilla.org

복합선택자 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css_ex3.css">
    <title>Document</title>
</head>
<body>
    <h1>복합선택자 사용 연습</h1>
<p>동물원에 왔어요</p>
<div class="zoo">
    <ul>
        <span>여긴 사파리!</span>
        <li>곰</li>
        <li id="tiger">호랑이</li>
        <li>팬더</li>
        <span class="lion">사자1</span>
        <li class="lion">사자2</li>
        <li>사육사 allie</li>
        <li>사육사 진형</li>
    </ul>
    <span class="lion"> 사파리 밖의 사자</span>
</div>
<p class="lion">야생의 사자</p>
</body>
</html>

body > .lion {
    background-color: red;
}

ul > .lion {
    background-color: greenyellow;
    font-weight: bold;
}

#tiger {
    background-color: yellow;
}

body .lion {
    color: sienna;
}


body #tiger + li {
    background-color: skyblue;
}

.zoo li.lion ~ li {
    background-color: orange;
}

가상 선택자 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css_ex4.css">
    <title>가상 클래스 선택자 실습</title>
</head>
<body>
    <h1>ABCD</h1>
    <a>abcd</a>
    <br>
    <input>

    <hr>

    <div class="stripes">
        <div>navy</div>
        <div>yellow</div>
        <div>navy</div>
        <div>navy</div>
        <div>navy</div>
        <div>yellow</div>
        <div>navy</div>
        <div>navy</div>
        <div>navy</div>
        <div>yellow</div>
        <div>navy</div>
      </div>
    
</body>
</html>

css 우선순위

!important(다 무시하고 적용하겟다) > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자

css 복잡한 속성 - position

position 속성을 이용한 실습

<!DOCTYPE html>
<html lang="en">
<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 - position</title>

    <link rel="stylesheet" href="./css_ex5.css">
</head>
<body>
    <div class="div1 position-absolute"></div>
    <div class="div2 position-absolute"></div>
    <div class="div3 position-absolute"></div>
    <div class="div4 position-absolute"></div>
    <div class="div5 position-absolute"></div>
    <div class="div6 position-absolute"></div>
    <div class="div7 position-absolute"></div>
    <img class="img1" src="grass.png" alt="grass">
    <img class="img2" src="grass.png" alt="grass">
    <img class="img3" src="grass.png" alt="grass">
</body>


</html>

div {
    border: 1px solid black;
    border-radius: 50px;
    width: 100px;
    height: 100px;
    position:absolute;
}

.div1 {
    top: 100px;
    left: 100px;
    background-color: skyblue;
    z-index: 10;
}

.div2 {
    top: 120px;
    left: 160px;
    background-color: orange;
    z-index: 11;
}

.div3 {
    top: 180px;
    left: 180px;
    background-color: yellow;
    z-index: 12;
}

.div4 {
    top: 180px;
    left: 220px;
    background-color: green;
    z-index: 13;
}

.div5 {
    top: 180px;
    left: 300px;
    background-color: blue;
    z-index: 14;
}

.div6 {
    width: 30px;
    height: 30px;
    top: 120px;
    left: 120px;
    background-color: white;
    z-index: 10;
}

.div7 {
    width: 10px;
    height: 10px;
    top: 130px;
    left: 120px;
    background-color: black;
    z-index: 10;
}

.img1 {
    width: 100px;
    height: 120px;
    top: 200px;
    left: 120px;
    position: absolute;
    z-index: 12;
}
.img2 {
    width: 100px;
    height: 120px;
    top: 170px;
    left: 330px;
    position: absolute;
    z-index: 12;
}
.img3 {
    width: 200px;
    height: 120px;
    top: 180px;
    left: 160px;
    position: absolute;
    z-index: 14;
}

transfrom, transition을 이용한 실습

기울인 사진 나열하기 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css_ex6.css">
    <title>Document</title>
</head>
<body>
    <div>
        <img class="img1" src="/03-css/image/beach1.jpg" alt="">
    </div>
    <div>
        <img class="img2" src="/03-css/image/beach2.jpg" alt="">
    </div>
    <div>
        <img class="img3" src="/03-css/image/beach3.jpg" alt="">
    </div>
</body>
</html>

div {
    position: absolute;
}

.img1 {

    width: 300px;
    height: 300px;
    top: 300px;
    left: 300px;

    position: absolute;
    transform: skewY(30deg);
    z-index: 2;
}
.img2 {

    width: 300px;
    height: 300px;
    top: 300px;
    left: 500px;
    
    transform: skewY(30deg);
    position: absolute;
    z-index: 1;
}
.img3 {

    width: 300px;
    height: 300px;
    top: 300px;
    left: 700px;

    transform: skewY(30deg);
    position: absolute;
    z-index: 0;
}

hover를 이용한 TextBox 확대하기 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css_ex7.css">
    <title>Document</title>
</head>
<body>
    <p>Transition 실습</p>
    <div class="transition" >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, quae? Autem necessitatibus fugiat earum veritatis, praesentium rem consectetur aperiam, repellat facilis commodi eveniet aut. Accusantium, pariatur accusamus? Sit, cupiditate numquam.
    </div>
</body>
</html>

p {
    font-size: 30px;
    font-weight: bold;
}
div {
    width: 100px;
    height: 100px;

    background-color: black;
    color: white;

    overflow: scroll;
}

div:hover {
    width: 300px;
    height: 300px;

    transition:1s;
    transition-delay: 0.5s;
}

css 는 확실히 나에게서 쥐약인 것 같다.

익혀할 구성이나 옵션이 너무 많은듯 ㅠ

주말동안 리더님이 주신 과제랑 css를 좀 더 익히는 시간을 가져야 할 듯.

CSS 선택자 연습용 사이트

https://flukeout.github.io/

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

처음에 뭐 어떻게 푸는거지 싶었는데

옆에 힌트보고 풀면 되는거 였다

애니메이션이 귀여워서 재밌었음

'SeSAC' 카테고리의 다른 글

[새싹X코딩온] 풀스택 3주차 회고록 - 2 \| jQuery (0)	2023.08.03
[새싹X코딩온] 풀스택 3주차 회고록 - 1 \| Bootstrap Grid System (0)	2023.08.01
[새싹X코딩온] 풀스택 2주차 회고록 - 2 \| javascript 과제 (0)	2023.07.30
[새싹X코딩온] 풀스택 2주차 회고록 - 1 \| CSS, javascript (0)	2023.07.25
[새싹X코딩온] 풀스택 1주차 회고록 - 1 \| OT, Git (0)	2023.07.18

기타치는 주니어 개발자

[새싹X코딩온] 풀스택 1주차 회고록 - 2 | HTML , CSS

HTML ( Hyper Text Markup Language )

구성요소

태그 실습

설문조사 폼 만들기

Semantic Tag

table

<table> 속성

<td> 속성

CSS ( Cascading Style Sheet )

CSS 참조방식

Selector 선택자

Property 속성

Value 값

CSS에서 사용 가능한 색상들

복합선택자 실습

css 우선순위

css 복잡한 속성 - position

position 속성을 이용한 실습

transfrom, transition을 이용한 실습

CSS 선택자 연습용 사이트

'SeSAC' 카테고리의 다른 글

티스토리툴바

[새싹X코딩온] 풀스택 1주차 회고록 - 2 | HTML , CSS

HTML ( Hyper Text Markup Language )

구성요소

태그 실습

설문조사 폼 만들기

Semantic Tag

table

<table> 속성

<td> 속성

CSS ( Cascading Style Sheet )

CSS 참조방식

Selector 선택자

Property 속성

Value 값

CSS에서 사용 가능한 색상들

복합선택자 실습

css 우선순위

css 복잡한 속성 - position

position 속성을 이용한 실습

transfrom, transition을 이용한 실습

CSS 선택자 연습용 사이트

'SeSAC' 카테고리의 다른 글

관련글

티스토리툴바