엘리스 1일차 월요일 실시간 강의 html, css

지식을 배우는데에는 순서가 없다.
w3school: html, css 등 문법 나와있는 사이트

시간되면 공부: https://opentutorials.org/course/3265

html 태그
strong: 굵게
u: 밑줄(underline)
width = "100"
ul: 경계를 나누는 태그
ol: 숫자를 자동으로 매겨주는 리스트 태그
li: 리스트 태그
a: 링크 href = hypertext reference

<a href="http://info.cern.ch/">
  
<a href="#html"> <!-- 같은 페이지 안에서 속성이 html 인거 식별해서 이동 -->

title: 웹 제목

이런게 다 속성(attribute)이다.

wrapping (편하게 사용할 수 있는 팁) 참고
보기 -> 명령 팔레트 -> wrap with abbrevication 검색: 드래그 후 태그로 감싸기

lorem 1000: 랜덤한 라틴어 단어 1000개

meta data: 정보를 설명하는 정보

본문은 body tage로 묶고 본문을 설명하는 부분은 head tag로 묶음

html tage로 전체 감싼다.

가장 위에 쓴다.

Client와 Server, 즉 인터넷을 하기 위해서는 두대의 컴퓨터가 필요하다.
두개 다 host이다.

ip는 0~255.0~255.0~255.0~255 즉 256^4, 약 43억개
127.0.0.1: 내 컴퓨터를 의미하는 특수한 ip

처음에 ! + enter = html폼 자동완성

css에서 html의 id를 선택자로 할때에는 #hello {}, class를 선택자로 할때에는 .hello {}

width: 100vw;
height: 100vh; 창크기에 의존 (반응형웹)

margin: 0; 상하좌우 여백공간 조절, 0이면 창에 딱맞음

• {} : 전체적용

* {
    margin: 0;
    padding: 0;
}

p {
    font-size: 2em;
    font-weight: bold;
    /* color: pink; */
    /* color: #6393e0; 첫 두글자 빨간색 중간두글자 초록색 마지막 두글자가 파란색 */
    /* color: rgb(52, 179, 138); */
    /* color: rgba(52, 179, 138, 0.5); rgba의 마지막 인자는 투명도 0~1, 0.5대신 50%라고 써도됨 */
    color: hsl(287, 56%, 47%);
    
    /* 
    em : 브라우저의 기본단위로 알아서맞춰짐, 약 15px 
    브라우저별로 유동적으로 사용 (반응형 웹: 모바일, 데스크탑)
    */
}

.henry {
    /* background-color: #53ff23; */
    background: linear-gradient(blue, white); /* 그라데이션 색 */

    width: 100vw;
    height: 100vh;

    text-align: center;
    /* flex */
    display: flex;
    align-items: center; /*수직 가운데*/
    justify-content: center; /*수평 가운데*/
}

.henry:hover { /* 마우스 커서 올라갔을때 효과주기 */
    background: linear-gradient(black, white)
}