Semantic? : 의미가 있는 태그를 말한다
<div>태그나 나<span>과 같이 의미가 없는 태그는 태그 이름만보고 어떤 내용인지 유추하기 쉽지 않은 방면에 , form , table , article 등 의미가 있는 태그는 내용을 명확하게 정의한다
[시멘틱 태그]
의미 있는 태그를 사용하는 것.(사용 이유는 너무 많은 태그드를 사용하면 나중에 안좋다)구조 예시
<header> : 페이지 제목과 같은 소개 내용, 일반적인 로고,아이콘,검색등 <nav> : 메뉴, 목차 <section> : 콘텐츠 부분 <aside> : 사이드바 상자 <article> : 게시물(게시물을 작성할 경우 h태그를 사용해 주는 것이 좋다) <footer> : 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터, 관련 문서 링크 (항상 html파일에서 작업을 하기 전에 header, section, footer등으로 기본 구조를 잡고 만드는 것이 좋다)
웹을 만들때 div태그만 사용하는 것이 아니라 누가봐도 어떤 기능인지 알 수 있도록 의미 있는 태그를 사용해야 한다
(사용 이요 : 유지보수를 위해, 어떤 태그에 어떤 부분을 수정해달라고 하면 쉽게 가능)
(검색 엔진 최적화(SEO) 만들면 구글,네이버에서 싸이트가 나올수 있게 크롤링을 해간다
이때 h1태그에 어떠한 것이 들어 있나 가지고 간다 따라서 h1태그 같은 경우 의미가 확실하게 있는 것을 사용한다.)항상 html에 어떤 데이터가 들어갈 것인가 생각 ==> 코드를 작성한다.
ex. nav태그에는 메뉴 부분이 들어간다.
URL :웹상에서 문서, 이미지, 동영상 등의 자원들의 위치를 나타내는 주소(웹 페이지를 찾기 위한 주소)
(ex) https://www.google.co.kr)URL의 구조
-1. 프로토콜 졸유
-2. 자원이 있는 서버의 IP주소, 도메인 주소, 포트 주소
-3. 자원의 위치
==> 프로토콜//IP주소 OR 도메인 주소 OR 포트 주소 / 자원의 위치
==> https ko.wikipedia.org wiki/url
웹 브라우저와 웹 서버
- 웹 서버의 역할
클라이언트로 부터 http요청을 받는다.
필요한 정보를 반환 해준다.
사용자 출력 장치에 데이터가 출력됨- 웹 브라우저
웹 브라우저를 통해 해석된 코드는 사람이 쉽게 보고 이해할 수 있는 형식으로 브라우저 화면에 표시
서버에서 전달된 코드 형태의 html문서, css,js를 해독하는 핵석기 역할 제공
CSS속성
display: flex; /* 가로로 정렬 */ /* flex의 기본값 flex-direction: row; flex-direction: column; */ /* 가로 기준 justify-content: center; 가운데로 보내는것 justify-content: flex-end; 끝으로 justify-content: flex-start; 처음으로 기본값 justify-content: space-between; 요소가 균등하게 떨어진다(양끝이 벽에 붙는다) justify-content: space-around; 요소가 균등하게 떨어진다(양끝도 떨어짐) */ /* align-items: center; 세로기준으로 가운데 */CSS정리
📍position : 속성을 통해 문서 상에 요소를 배치 하는 방법
-기준을 잡는 방법 : position: relative
-이동시킨다 : top:100px;
📍relative : 요소 자기 자신을 기준으로 배지
📍absolute : 부모 조상 쇼소를 기준으로 배치
📍block : 한줄 모두 차지(div, p.....)
📍inline : 콘텐츠의 크기 만큼 차지(span)선택자 선택
📍자식 선택자 : 자식 선택자는 계층 구조 에서 바로 아래 오는 자식 요소만 선택 한다
선택자 와 선택자는 > 로 구분
ex) div > p : div자식 요소 p만 선택
📍자손 선택자 : 자손 선택자는 계층 구조에서 하위에 오는 모든 자손을 선택한다
선택자 구분은 공백으로 구분한다
ex) div p : div의 자손 중 p를 선택
