👩💻웹의 본질은 뭐다?! 정보를 시각적으로 보여주는거다!!👩💻
이걸 염두하고 강의 시작함미당~ ㅋㅋㅋㅋㅋ
이번 포스트에선 HTML과 CSS의 기본 문법을 정리할것임
물론! 내가 헷갈리는것만 쓸거임 난 html&css 경력직이니까(?)
(귀찮은건,,,아니라고 해두자,,,,)
1. HTML
🌝 <head> : 콘텐츠를 보여주는 것 이외의 모든 설정 태그를 넣는다
🌝 <body> : 실제로 화면을 구성하는 태그를 넣는다
<h1>Hello world!</h1>
<h2>Hello world!</h2>
<h3>Hello world!</h3>
<h4>Hello world!</h4>
<h5>Hello world!</h5>
<h6>Hello world!</h6>
<a href="https://www.naver.com">네이버로 넘어가기</a>
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" />요것들은 잘 아니까 패thㅡ~
🌝 <form> : 내부에 입력하는 값들을 관리해주는 태그로, 주요 속성 중 action은 'Submit'을 눌렀을 때 입력된 서버 URL로 정보를 전송한다
🌝 <label> : input 태그의 라벨을 붙일 때 사용한다
🌝 <div> : 영역을 나누도록 도와주는 태그, 컨텐츠들을 담는 하나의 박스로 부모 너비만큼을 차지한다.
🌝 <span> : <div>와 함께 CSS를 이용하여 영역을 구성할 때 많이 사용한다. div와의 차이로는 줄바꿈이 되지 않으며 자식 컨텐츠의 너비만큼을 차지한다.
🌝 (시멘틱 태그 : 의미를 가지는 태그, header/footer/nav/aside 등)
2. CSS
🌍CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어이다.
🌝 선택자 (selector)
/* 태그를 선택자로 했을 때 */
p {
color: orange;
}
/* 태그를 id로 했을 때 */
#title {
color: blue;
}
/* 태그를 class로 했을 때 */
.item {
color: red;
}
/* 선택자 조합 */
#item1, #item2 {
background-color : red;
}- id : 딱 한 요소에게만 적용된다.
- class : class가 적용된 모든 요소에게 적용된다.
🌝 하위 선택자 vs 자식 선택자
위 코드를 치면 아래 결과가 나오는 거임~
🌝 여백
- margin : 선택자의 바깥의 여백을 설정한다
- padding : 선택자의 내부의 여백을 설정한다
다음 강의는 flex 레이아웃 익힐거야~!~! 바아로 보러 가자꾸나~!
'사이드 프로젝트 > 인프런 - 올인원 개발 클래스' 카테고리의 다른 글
| 클라이언트와 서버 (0) | 2021.08.11 |
|---|---|
| Javascript 비동기 처리 (0) | 2021.08.10 |
| Javascript 콜백과 익명함수 (0) | 2021.08.10 |
| javascript 공부하기 (0) | 2021.08.08 |
| flex 레이아웃 (0) | 2021.08.04 |
댓글