TIL day 01은 업로드 가이드라인에 의한 비공개입니다.
웹 기본 규칙
- 웹 표준: 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성: 장애의 여부와 상관없이 모두가 웹 사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 동작하도록 하는 기법
HTML의 기본 태그
<!DOCTYPE html>: html문서 선언<head></head>: 문서와 관련된 요약 정보 제공
2-1.<meta charset='utf-8'>: 문자 코드
2-2.<title>제목</title>: 웹사이트 제목<body></body>: 웹사이트 내용
3-1.<img src='', alt=''>: 이미지 태그 / src:이미지 링크, alt:대체 텍스트(웹 접근성을 위해서 작성해주는 것이 좋다)
3-2.h1~h6: 제목 혹은 부제목, h1태그는 보통 html문서에서 한번만 사용한다.
3-3.<p>content</p>: paragraph, 본문 내용을 적을 때 사용
3-4.<ul></ul>,<ol></ol>: unordered list, ordered list
3-5.<a href='#' target='_blank|_self|_parent|_top|프레임 이름'>LINK</a>: href에 명시된 주소로 이동하는 링크 태그, target은 링크된 문서가 열릴 위치
구조를 잡을 때 사용하는 태그
- 아래 존재하는 태그들은 필수가 아닌 일반적으로 많이 사용하는 형태이므로 참고만 하기
<header></header>: 웹사이트의 머리글을 담는 공간
1-1.<nav></nav>: 메뉴 버튼을 담는 공간, ul, li, a와 함께 사용<main></main>: 본문 영역
2-1.<article></article>: 정보 영역, 만약 이 태그를 사용한다면 반드시<h#>태그가 존재해야 한다.
3.<footer></footer>: 웹 사이트 하단에 정보를 넣을 때 사용
HTML 태그의 성격
- block: y축으로 정렬, 공간 생성 가능, 상하 배치 작업 가능
- inline: x축으로 정렬, 공간 생성 불가능, 상하 배치 작업 불가능(margin-top,bottom, padding-top,bottom)
CSS
- 선택자(tag, class, id)-속성-속성값으로 이루어져 있음
- inline: 직접 html 태그안에 원하는 스타일을 적용
- intenal: style 태그 안에 넣기
- external: 외부 css파일 사용
cascading
- 나중에 작성한 선택자의 우선 순위가 높음
- 더 구체적으로 작성된 선택자의 우선 순위가 높음
- inline style > internal style > id > class > type순
TIL day 03 참조
margin, padding 차이
- margin값 조절 -> box width = 지정한 width값
- padding, border값 조절 -> box width = 지정한 width값 + padding, border값
margin 병합
- 형제 사이에는 더 큰 margin값만 적용
- 부모자식 사이에는 자식에 적용된 margin값이 부모에게도 적용
- html, body태그는 기본적으로 margin과 padding값을 가지고 있어서 초기화가 필요하다. (TIL day 03 참고)
- no-float, float, inline-block차이
no-float
float
inline-block
- img 태그로 이미지를 삽입하면 아래쪽에 미세하게 공백이 생기므로
vertical-align: middle;을 넣어주는 것이 좋다.
공부할 게 너무 많아요
0개의 댓글
관련 채용 정보
