추천사이트
https://flukeout.github.io/
codepen.io/pen/
접속하게되면 3개의 레이아웃이 생성됨
HTML CSS JS
하얀 창: 브라우저(문서 내용 출력화면)
HTML
문서의 한 일종
명확하게 보거나 전달할 때
문서를 형식화(구조화) 시키는 작업
웹브라우저가 읽을수있는 형식으로 구성됨
<> - 태그라고 불림,문서에서 어떤 역할 하는지 알아두자
대제목
중제목
소제목 구조화 가능
문자입력후 Tab 누르면 제목 및 내용 구조화 설정됨
EX) <일기>
<작성일>2023년6월20일</작성일>
<제목>경주 다녀온 날..</제목>
<내용>오늘은 날씨가 어쩌구저쩌구...</내용>
CSS
디자인코드 작성하는 곳
CSS속성은 굉장히 많다
자주 사용하는 걸 알아두자
1.color: 텍스트의 색상을 지정합니다. 예를 들어, color: red;는 텍스트를 빨간색으로 표시합니다.
2.font-size: 텍스트의 크기를 조정합니다. 예를 들어, font-size: 16px;는 텍스트를 16픽셀 크기로 표시합니다.
3.background-color: 요소의 배경 색상을 지정합니다. 예를 들어, background-color: #f1f1f1;은 요소의 배경을 연한 회색으로 설정합니다.
4.margin: 요소의 외부 여백을 지정합니다. 예를 들어, margin: 10px;는 모든 방향으로 10픽셀의 여백을 생성합니다.
5.padding: 요소의 내부 여백을 지정합니다. 예를 들어, padding: 20px;는 모든 방향으로 20픽셀의 여백을 생성합니다.
6.border: 요소의 테두리를 설정합니다. 예를 들어, border: 1px solid black;는 1픽셀 굵기의 검은색 실선 테두리를 생성합니다.
7.display: 요소의 표시 방법을 설정합니다. 예를 들어, display: none;은 요소를 화면에 표시하지 않습니다.
8.position: 요소의 위치를 설정합니다. 예를 들어, position: absolute;는 요소를 다른 요소를 기준으로 배치할 수 있게 합니다.
9.width와 height: 요소의 너비와 높이를 설정합니다. 예를 들어, width: 200px;는 요소의 너비를 200픽셀로 설정합니다.
10.text-align: 텍스트의 정렬 방법을 지정합니다. 예를 들어, text-align: center;는 텍스트를 가운데 정렬합니다.
inline -> 한줄에 최대한 많이 나열(좌우 너비가 최소로 줄어든다)
-> 글자 취급
block -> 한줄을 다 차지함
