[HTML]구성
요소(element)로 구성
<태그 속성attributes = "값">내용content</태그>
[HTML]문서 구조
<!DOCTYPE> <html> <head> </head> <body> </body> </html>
<!DOCTYPE html>
문서 형식을 알려줘서 웹페이지를 올바르게 표시 할 수 있게 한다.<html></html>
HTML 문서의 시작과 끝이다.<head><head>
화면에 표시되지 않는 정보가 들어있다.<title></title>제목<link></link>css 파일 적용<meta>문자 인코딩 방식, 문서에 대한 다양한 정보를 표현<base>기본적인 URL 경로 지정(body 부분 내의 상대 경로로 표시된 URL을 절대 경로로<!--첫번째 코드와 두번째 코드의 결과값은 동일하다--> <base href=”http://testsite/html”><a href=”file_1.html”> <a href=”http://testsite/html/file_1.html”>
<body></body>
본문 내용
[CSS]구성
선택자 { 속성 : 값; }
[CSS]css 속성이 중복될 때 우선순위는?
!important > 인라인(inline) 스타일 > id > class, attribute, pseudo-class > tag , pseudo-element > 상속
- 상속 : 자식에게도 같은 스타일이 적용되는 것.
- pseudo-class(의사 클래스) : 선택한 요소가 특별한 상태여야 적용된다.
<예시>
selector:first-child{} : 형제 요소 중 맨 처음 요소를 선택한다.
selector:last-child{} : 형제 요소 중 가장 마지막 요소를 선택한다.
selector:nth-child(){} : 형제 사이에서의 순서에 따라 요소를 선택한다. - pseudo-element(의사 요소) :선택한 요소의 일부분에만 스타일을 적용한다.
인라인 스타일 > 내부 스타일 > 외부 스타일
- 인라인:
<태그 style=""></태그> - 내부:
<style>태그{속성:"값"}</style> - 외부: css 파일 따로 작성
<link href="style.css" rel="stylesheet"/>
[CSS]속성
-
text-indent
들여쓰기 -
font family
글꼴 설정. 만약 폰트 이름에 띄어쓰기가 되어있으면 ""(쌍따옴표)를 붙여야 한다.font-family: Georgia, "Times New Roman"; -
background-image
css로도 이미지를 삽입할 수 있다.background-image: url("image.png") height: 300px; width: 300px; background-size: 100%;
[CSS]속성값
-
background-color:transparent;
배경색을 없앤다. none 값을 입력하지 않도록 주의! -
margin : auto;
margin 값을 균등하게 배분하여 중앙 배치되도록 한다.
[CSS]헥스? RGB?
헥스(HEX) : 16진수를 의미하며, 색상을 #과 뒤에 붙는 여섯 자리의 16진수로 나타낸다.
color:
pink=rgb(255,192,203)=#ffc0cb
backend developer 🐌