나만보는 코딩공부

절대단위

px = 모니터의 화면을 구성하는 사각형 1개의 크기를 의미 

상대단위

텍스트 속성

코딩 자율학습 HTML + CSS + 자바스크립트

기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서

이책을 통해 정리했음을 알립니다.

link: https://search.shopping.naver.com/book/catalog/32462974669?cat_id=50010881&frm=PBOKPRO&query=%EC%BD%94%EB%94%A9+%EC%9E%90%EC%9C%A8%ED%95%99%EC%8A%B5+HTML+%2B+CSS+%2B+%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&NaPm=ct%3Dlb1m2pnk%7Cci%3D2691b9be91912c55091e937a366069b24337e893%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3D432c0c31c9bf882d3a111893e75b0508ef143ec8

전체 선택자 : 모든 요소를 한 번에 선택자로 지정

*{ css코드작성 }

태그 선택자 : HTML태그명으로 선택자를 지정

태그명{ css코드작성 }

id선택자: id속성값을 이용해 선택자를 지정

#id속성값{ css코드작성 }

class 선택자 : class 속성값을 이용해 선택자를 지정 

.class속성값{ css코드작성 }

기본속성 선택자 : HTML태그에서 사용할 수 있는 속성과 값을 사용해 선택자 지정

[속성]{ css코드작성 }
[속성 = 값]{ css코드작성 }

기본속성 선택자는 다른 선택자와 같이 사용 가능

다른선택자[속성]{ css코드작성 }

그룹선택자 : 여러 선택자를 하나로 그룹 지을 떄 사용

선택자1, 선택자2, 선택자3{ css코드 작성}

자식 선택자 : 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용

부모 선택자 > 자식 선택자{ css코드작성 }

하위 선택자 : 선택자의 범위를 특정 부모 요소의 하위 요소로 한정

선택자1 선택자2 선택자3{ css코드작성 }

인접 형제 선택자 : 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정

이전 선택자 + 대상 선택자{ css코드작성 }

일반 형제 선택자: 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정

이전 선택자 ~ 대상 선택자{ css코드작성 }

코딩 자율학습 HTML + CSS + 자바스크립트

기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서

이책을 통해 정리했음을 알립니다.

link: https://search.shopping.naver.com/book/catalog/32462974669?cat_id=50010881&frm=PBOKPRO&query=%EC%BD%94%EB%94%A9+%EC%9E%90%EC%9C%A8%ED%95%99%EC%8A%B5+HTML+%2B+CSS+%2B+%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8&NaPm=ct%3Dlb1m2pnk%7Cci%3D2691b9be91912c55091e937a366069b24337e893%7Ctr%3Dboknx%7Csn%3D95694%7Chk%3D432c0c31c9bf882d3a111893e75b0508ef143ec8

시맨틱웹은  더 의미있게 웹페이지를 설계하는 트렌드

시맨틱 태그는 태그의 이름만으로도 태그의 용도나 역할에 대한 의미가 명확한 태그htmh

HTML5에서 새롭게 추가되었다.

header태그 : 웹 페이지에서 헤더 영역을 구분하는데 사용

<header>
    헤더 구성요소
</header>

헤더영역은 웹 사이트의 최상단이나 좌측에 위치하며, 로고, 검색, 메뉴와 같은 요소들을 포함한다.

hgroup 태그 : 제목과 부제목을 한번에 묶을 때 사용한다.

<hgroup></hgroup>

nav태그 : 웹페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는데 사용

<nav></nav>

웹사이트의 주요 탐색 링크 영역만 포함하면 된다.

section 태그 : 웹페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용

<section></section>

보통 section태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함한다.

article 태그 : 웹페이지에서 독립적인 영역을 구분할 때 사용

<article></article>

section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고

article 태그는 어떤 웹 페이지에서든 독립적으로 사용할 수 있는 영역을 구분하는 차이점이 있다.

aside 태그 : 웹페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워

article이나 section으로 영역구분이 힘들 때 사용

<aside></aside>

footer 태그 : 웹 페이지에서 푸터 영역을 구분할 때 사용

<footer></footer>

일반적으로 페이지의 최하단에 있고, 저작권 정보, 연락처, 사이트 맵 등의 요소를 포함한다.

main태그 : 웹페이지의 주요 내용을 지정할 때 사용

<main></main>

문서에서 반복해서 등장하는 요소를 포함해서는 안된다.

main태그는 article, aside, footer, header, nav태그의 하위에 포함할 수 없다.

입력받기

 인풋 속성

textarea

옵션 관련 설정

progress

meta

출처 : https://www.inflearn.com/course/%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%8C%8C%EB%8A%94-html-css/dashboard

표 사용

주의사항 : 은 표 용도로만 사용!(레이아웃으로는 사용하면 안됌)

테이블 세부 내용

표 열, 행 조정

링크

<a href="연결할 주소" target="링크를 열 곳 옵션">

주소 및 연락처

출처 :https://www.inflearn.com/course/%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%8C%8C%EB%8A%94-html-css/dashboard

제목과 본문 태그

중요도 태그

인용된 컨텐츠

나열되는 요소

이미지 넣기

<img src="이미지 파일 경로" alt="대체 텍스트"  title="튤팁 텍스트">

출처 : https://www.inflearn.com/course/%EC%A0%9C%EB%8C%80%EB%A1%9C-%ED%8C%8C%EB%8A%94-html-css/dashboard