HTML 이란? 기본 웹페이지에서 보여지는 부분 CSS 이란? 간단한 방식 기본 - tag 선택자 html 요소를 직접 지칭 h1{ } p{ } 기본 - 클래스 선택자 ( 여러 요소에 사용 가능) .last{ } 기본 - id 선택자 ( 1개의 html 요소에 사용가능) contents # em{ } Javascript 이란? 웹페이지를 "동적"으로 만드는데에 사용되는 프로그래밍 언어. 실습 TOOL code pen - 브라우저에서 바로 보면서 코딩 가능 MDN - Devdocs - html 요소, 태그 검색 Can l use - 태그, 요소가 브라우저에서 사용가능한지 알려주는 사이트.

1. 레이어의 최대길이와 최소길이설정 max-width: 1400px; min-width: 1060px; body{ min-width: 1060px; } .container{ max-width: 1400px; } 2. 컨텐츠 가운데 정렬하기 .header{ background: 회색; } .container{ background: 하얀색; margine 0 auto; } 3. padding 값도 넣어준다. .container{ background: 하얀색; margine 0 auto; padding: 0 20px; 여백이 있어서 보기 좋다 } 4. 글씨 크기 설정 html{ font-size:10px; } body{ font-size:1.8rem; } 5.로고 배치하기 .container{ positio..

텍스트와 하이퍼링크 #제목 태그 #텍스트 단락 표시 #태그 : 이태리체 : 굵은 글씨 #목록태그 : 순서가 있는 목록 ordered list ->1 ->2 ->3 : 순서가 없는 목록 unordered list #정의 목록 태그 defintion list, term, description 정의 대상 설명 : 코드를 보여줄 때, 글씨체가 달라짐 &nbsp: 공백 #하이퍼링크 인스타그램으로 이동 div vs. span / block vs. inline #div # div와 다르게 줄바꿈을 하지 않음 #블럭 요소 블럭 안에 블럭을 넣을 수 있음 -p, head, ul, ol, , li, div #inline 요소 inline 요소를 포함 할 순 있지만, block 요소를 넣을 순 없다..

CSS -HTML이 구조를 잡는 데 사용된다면, CSS는 웹페이즈의 스타일링과 디자인을 하는 데 사용. tag 선택자 class 선택자/ 여러 부분에서 사용 가능 id 속성값 / 딱 한번만 사용 가능 JavaScript 웹 페이지를 동적으로 만드는데에 사용하는 프로그래밍 언어 서버에 닿지 않아도 상호작용 가능. 브라우저에서 정보를 좀 더 복잡하게 표기할 수 있게 됨.

콘텐츠의 구조를 표현하기 위한 덱스트 포맷. 웹 브라우저는 HTML 태그를 그대로 보여주지 않고, 태그의 구조와 특성을 파악해 그래픽으로 보여준다 1. 검색엔진이 페이지를 파악하기 위한 방법 2. 다른 개발자들과의 원활한 협업 3. 시각장애인이 페이지를 소리로 들을 때 사용하는 스크린리더 등 보조 기구에 적절. 적절한 태그를 사용하고 스타일링 등 HTML의 역할과 책임을 뛰어넘는 부분은 분리해야 함. 웹 표준에 맞는 태그를 적절하게 사용.

1. 서버와 클라이언트 요구를 보는 컴퓨터: 클라이언트 요구를 보내주는 컴퓨터: 서버 (index) 2.HTTP와 웹 브라우저의 역할 브라우저 > url입력 > url해석 서버> 요청확인> http 응답(HTML포함) > 브라우저> 렌더링 HTTP 요청: 메서드(Method), URL 주소, 헤더(Header), 본문(Body) HTTP 응답: 상태코드(202 ok, 404 Not Found), 헤더, 본문 3.개발자 도구 사용 element: css 확인 및 변경, 요소 추가 및 취소 console: 자바 사용가능 Network: 웹서버와의 요청&응답 확인 Network > weather.naver.com > Response: html파일이 들어있음 4. 프론트엔드와 백엔드 프론트..