TIL(22.1.20.THU)

기미노·2022년 1월 19일

CSS html 스파르타코딩클럽 웹개발 종합반1주차

웹의 동작 개념

우리가 보는 웹 페이지는 해당 웹 페이지의 서버에서 미리 준비해두었던 것을 받아서 그려주는 것

브라우저가 하는 일

해당웹 서버에 요청을 보낸다. 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보냄
서버에서 받아온 파일을 다운로드하여 화면에 그려준다.

HTML

HTML은 뼈대, CSS는 꾸미기
HTML 부모-자식 구조
- 부모 요소는 해당 요소를 포함하는 가장 가까운 상위 요소
- 자식 요소는 해당 요소가 포함하는 직계 하위 요소

head 와 body

head

페이지의 속성을 정의하거나, 필요한 스크립트를 부름. 즉 눈에 안 보이는 필요한 것들을 작성하는 영역
대표적 요소

💡 meta, script, link, title 등

body

문서의 몸통을 나타냄. 브라우저 화면에 보이는 것들이 들어감.

대표적 요소들


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>제목을 나타내는 태그, 검색엔진이 문서를 파악하는 부분</h1>
    <h2>h2는 소제목</h2>
    <h3>h3~h6은 숫자가 커질수록 글자의 크기가 작아짐</h3>
    <hr>
    span 태그: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼</button>
    <hr>
    textarea 태그입니다: <textarea> 사용자가 여러줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의</textarea>
</body>

</html>

CSS

무언가를 꾸밀 때는 가리키는 대상이 있어야 한다.

💡 이름표를 작성하고 해당 이름표를 가리켜 꾸민다.

표기 영역

HTML 부분안에 부분에 표기
파일분리
- 여러 웹페이지에서 공통적인 CSS를 참조할 때, 중복 코드를 제거할 수 있기에 매우 유용하며, 문서 규격과 스타일의 분리를 위해 (작업의 분담) CSS를 별도의 파일로 분리하여 사용하는 것이 좋다.
- .css 파일을 생성하여 해당 파일에 표기
- .html 파일 부분에 아래와 같이 표기
```
<head>
<link rel="stylesheet" type="text/css" href="css파일명.css"> 
</head>
```

CSS속성들

기초 속성

💡 배경관련
background-color
background-image
background-size

사이즈
width // 너비(가로,행)
height // 높이(세로.열)

폰트
font-size
font-weight
font-family
color

간격
margin
padding

margin, padding 이해에 도움되는 출처 https://geniusnohkang.tistory.com/17

자주 쓰이는 CSS 속성

배경이미지 투명하게 하기

💡 background-color: transparent;
배경이미지 설정

💡 background-image: url(”~“);
배경이미지 내부 중앙 배치

💡 background-size: cover
background-position: center
배경테두리 설정

💡 border-radius
문서를 수평으로 정렬할 때( block요소 안에 있는 inline 요소를 정렬)

💡 text-align
배경이미지를 가운데로 가져올 때
- 그냥 하면 너비가 여백없이 차지되어 있으므로 먼저 너비를 줄인 후 그 화면을 가운데로 옮긴다.
  
  💡 margin: auto; // 웹 브라우저가 수평방향(행)으로 마진 값을 자동으로 설정
CSS선택자( CSS Selector)
- 특정 요소들을 선택하여 스타일을 적용할 수 있게 함
- Rule Set
  - HTML 페이지 안의 특정 요소들(이름표)을 어떻게 렌더링할 것인지 브라우저에게 알려주는 css문장 css문장.
    - 이해를 도와주는 그림 있는 사이트 https://www.nextree.co.kr/p8468/
  - 형식
```
p { color: red; }
```
    도움될만한 이미지 출처 https://www.nextree.co.kr/p8468/
- 하위 선택자, 자식 선택자
  - 하위 선택자
    - 부모 요소에 종속되어 있는 모든 하위 요소들에 적용
      
      💡 p ul { border: 1px solid black;}
  - 자식 선택자
    - 부모의 바로 아래 즉 직계 자식 요소에만 적용
      
      💡 p > ul { border: 1px solid black;}
  - 도움될만한 이미지 출처 https://www.nextree.co.kr/p8468/
Flex
- Flex 레이아웃
  - 레이아웃 배치 전용 기능
  - 부모 요소를 Flex Container, 자식요소를 Flex item 이라 정의.
  - 메인축(Main Axis), 교차축(Cross Axis) 구성
- Flex의 속성
  - 컨테이너에 적용하는 속성
    - 활용
      - Flex 아이템들이 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지. height은 컨테이너의 높이만큼 늘어남.
        
        💡 display: flex;
      - 배치 방향 설정 아이템들이 배치되는 축의 방향을 결정하는 속성. 즉, 메인축을 행(row)으로 하는냐 열(column)로하는냐를 정함
        
        💡 flex-direction
      - 메인축 방향 정렬 메인축 방향으로 아이템들을 정렬하는 속성
        
        💡 justify-direction
      - 교차축 방향 정렬 교차축 방향으로 아이템들을 정렬하는 속성
        
        💡 align-items
  - 아이템(box느낌?)에 적용하는 속성
- 이해에 도움되는 출처 https://studiomeal.com/archives/197
box의 그림자 효과
- 문법
  
  💡 box-shadow: 첫 번째값 두 번째값 세 번째값 네 번째 값 다섯번째 값
  - 첫 번째: 수평방향 그림자 offset(object(박스?)기준으로 그림자가 이동하는 양)길이 나타냄
    - 양수일 경우
      
      오른쪽으로 그림자 생김
    - 음수일 경우
      
      왼쪽에 그림자 생김
  - 두 번째: 수직방향 그림자 offset길이 나타냄
    - 양수일 경우
    - 박스 아래로 그림자 생김
    - 음수일 경우
    - 박스 위쪽으로 그림자 생김
  - 세 번째: 그림자의 흐림 분경을 나타냄
    - 0보다 클수록
    - 그림자 끝이 흐려짐
    - 0에 가까울수록
    - 그림자 끝이 선명해짐
  - 네 번째: 그림자의 확산 거리를 나타냄
    - 양수일 경우
    - 오른쪽에 그림자가 붙음으로 시작해 그림자의 전방위로 확대
    - 음수일 경우
    - 왼쪽에 그림자가 붙음으로 시작해 그림자의 크기가 줄어듬
    - 다섯 번째: 그림자의 색상을 지정
- 활용
  
  💡 box-shadow: 0px 0px 3px 0px gray;
- 이해에 도움되는 출처 https://nicecarrot2.tistory.com/130
Grid
- 그리드 관련 이해에 도움되는 출처 https://studiomeal.com/archives/533
의사 클래스(Pseudo-Class)
- 선택하고자 하는 HTML요소의 특별한 ‘상태(state)’를 명시할 때 사용
- 문법
  - 선택자: 의사클래스 이름 {속성: 속성값;}
- hover
  - 동적 의사 클래스
  - 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택
- 이해에 도움되는 출처 http://www.tcpschool.com/css/css_selector_pseudoClass
선형 그래디언트(linear-gradient)
- 적용된 HTML 요소에 선형으로 그래디언트 효과(그라데이션)를 적용 시킴
- 문법
  
  💡 background: linear-gradient(진행방향, 색상지정점1, 색상지정점2);
  - 색상 지정점에는 그래디언트 효과로 그 지정점 1,2 사이의 색상 표현을 부드럽게 전환해주고 싶을 때 색상을 명시
- 활용: 이미지 어둡게 할 때 사용
  
  💡 background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))

유용한 꿀팁&사이트

폰트

구글웹폰트


https://fonts.google.com/?subset=korean

사용법

맘에드는 폰트 Jua를 사용하려면 아래와 같이 코드를 복사


<!-- HTML head에 이 부분을 추가한다-->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}

부트스트랩(bootstrap)

예쁜 CSS를 미리 모아둔 사이트(다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기)

사용법

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS파일 분리와 원리가 동일하다. head부분에 아래와 같이 link와 script를 넣어준다.


<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>나의 첫 번째 웹 페이지</title>
</head>

<body>
    <h1>나의 웹 페이지다!!</h1>
</body>

</html>

사이트

https://getbootstrap.com/docs/5.0/components/buttons/

주석

필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 할 때
코드에 대한 간단한 설명을 붙여두고 싶을 때
언어별
- 단축키(윈도우) : ctrl + /
- HTML : <!— 주석 처리할 내용 —>
- CSS : / 주석 처리할 내용 /
- JavaScript, Java : // 주석 처리할 내용

이모티콘

출처

https://kr.piliapp.com/facebook-symbols/

별
```
⭐⭐⭐
```

바꾼 공부법후의 오늘 하루 성찰

문제 발생
- 기존에는 강의를 들으며 아이패드로 필기를 하고 또 그것을 정리하여 블로그에 게시하려 했는데 시간이 너무 오래 걸림
- 거치는 단계가 너무 많음
  - 강의→실습→아이패드로 강의 필기 정리→블로그 타이핑
해결책
- notion의 MD를 이용함으로써 단계를 줄인다.
  - (강의→실습→노션으로 정리)→블로그에 옮기기
TO DO
- 좋았던 점
  - 시간이 전 상황보다 대폭 줄여짐. 시간 절약!
  - 의식의 흐름 순으로 빠르게 정렬이 가능해짐. 시간 절약! 아이패드로 수기로 정리 한 것 보다 더 깔끔
- 아쉬운 점, 더 고칠 부분
  - 아무래도 처음 정리하다 보니 어수선해 가독성에 문제가 존재하긴 함
    - 1주일에 한 번씩 복습 하면서 가독성부분 완화하기
      - N회독 효과 + 뇌과학적 접근인 장기 기억에 도움

기미노

인풋보다는 아웃풋을 중점적으로

이전 포스트

공부 방향성

다음 포스트

TIL(22.1.20.THU)

웹의 동작 개념

브라우저가 하는 일

HTML

head 와 body

head

body

CSS

표기 영역

CSS속성들

기초 속성

자주 쓰이는 CSS 속성

유용한 꿀팁&사이트

폰트

부트스트랩(bootstrap)

주석

이모티콘

바꾼 공부법후의 오늘 하루 성찰

공부 방향성

TIL(22.1.21.FRI)

0개의 댓글