[단국대] 멋쟁이 사자처럼 9기 정규세션 1주차 - 웹 기초, HTML/CSS

728x90

1. HTML/CSS 교육 내용 필기 (과제)

HTML 기초
- 태그: 내용을 나누고 어떤 역할을 하는지 구조를 정의
- 시작 태그: 컨텐츠의 시작을 표시
- 종료 태그: 컨텐츠의 끝을 표시
- <!DOCTYPE html>: 문서 형식을 정의
- <html lang="kr">: 본격적인 태그의 시작, 사용하는 주 언어를 정의
- <meta charset="utf-8">: 문서와 관련된 정보를 담음
- <title>: 웹 페이지의 제목을 담음
- 시맨틱 태그: 의미를 가지고 있는 태그
텍스트와 관련된 태그
- <h1> .. <h6>: 제목 태그
- <p>: 단락, 문단
- <br>: 줄 바꿈
- <pre>: 형식화 (적은 내용 그대로)
- <strong>: 진하게 (강조)
- <em>: 기울임 (강조)
- <sub>: 위로 올림
- <sup>: 아래로 내림
- <ins>: 밑줄 추가
- <del>: 취소선 추가
링크 태그
- <a>: 링크 태그
- 속성: 태그에 대해 추가적인 정보 제공, HTML의 모든 태그는 속성을 가질 수 있음
- <href>: 연결할 웹 사이트 주소를 담고 있음
- URL: 주소 + 경로, 인터넷에서 HTML 페이지, CSS 문서, 이미지 등 자원의 위치 를 나타냄
- 절대 URL: 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치 를 나타냄
- 상대 URL: 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
- target: 클릭으로 링크를 열 때 어디에 오픈할 것인지 정하는 속성
- target=“_self”: 현재 탭에서 링크를 여는 속성
- target=“_blank”: 새 탭에서 링크를 여는 속성
멀티미디어와 관련된 태그
- <img>: 이미지 태그
- src=“이미지 URL”: 불러올 이미지의 URL을 속성 값으로 가짐
- alt=“사진 설명”: 불러올 이미지가 없거나 불러오는데 실패했을 경우 대신 표시되는 문장
- weigth="수치"/height="수치": 이미지의 높이와 너비를 지정할 때 쓰는 속성
- <iframe src="동영상주소">: 외부 영상을 가져올 수 있는 태그
테이블과 리스트
- <table>: 표 전체를 감싸는 태그
- <tr>: 표에서 행을 구분하는 태그
- <th>: 표의 행 내부에 제목 셀을 담는 태그
- <td>: 표의 행 내부에 데이터 셀을 담는 태그
- rowspan=“숫자”: “숫자”만큼 셀이 행을 점유
- colspan=“숫자”: “숫자”만큼 셀이 열을 점유
- <ul>: 순서가 없는 리스트
- <ol>: 순서가 없는 리스트
- <li>: 리스트 아이템
폼 태그
- <form>: 폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
- action: 데이터를 보낼 URL을 지정
- method: 보내는 방식을 지정 -> post / get
- <input>: 사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
- type: input 태그의 종류를 결정
- name: input 태그 중 같은 타입과 구분되는 이름을 결정
- placeholder: input에 아무 값도 입력되지 않았을 때 나타나는 텍스트
- value: 실제 할당되는 값, 데이터를 넣으면 이 속성에 값이 들어감, 초기값
- <label>: 해당하는 라벨 클릭 시 태그가 활성화 됨
- <div>: 태그들을 구분 짓고 나누기 위해 사용하는 태그
- <select>: 여러개의 선택지를 제시하고 싶을 때 사용
- <textarea>: 한번에 많은 글을 입력 받을 때 사용
- <button>: 태그의 버튼 타입과 동일하게 버튼을 생성
텍스트와 관련된 프로퍼티
- font-size: 폰트 크기
- font-family: 폰트 종류 지정
- font-style: normal / italic / oblique
- font-weight: 폰트 두께
- text-align: 텍스트를 좌, 우, 중앙 정렬함
- line-height: 문장 사이의 간격을 조정함
- letter-spacing: 글자와 글자 사이의 간격을 조정함, 자간
- text-indent: 문단 시작부에 들여쓰기를 함
위치와 관련된 프로퍼티
- display: 요소가 보여지는 방식 지정, block / inline / inline-block / none
- position: 요소의 위치 정의, static(기본값) / relative(상대적) / absolute(절대적) / fixed(고정)
- flex-direction: item 방향 지정
- flex-wrap: item이 container를 벗어났을 때 줄을 바꿈
- justify-content: flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
- align-items: flex-direction으로 정해진 방향 기준으로 수직으로 item을 정렬
- align-content: flex-direction으로 정해진 방향 기준으로 수직으로 여러줄의 item을 정렬
- flex-grow: flex 아이템의 확장과 관련된 속성
- flex-shrink: flex 아이템 축소와 관련된 속성
- flex-basis: flex 이이템의 기본 크기 결정

2. 네이버 로그인 페이지 실습

프로그래밍 분야에서는 '백문이 불여일타'라는 말이 있다.

개념 설명만 백번 듣는 것보다 직접 코드를 작성해보아야 의미를 더 쉽게 이해할 수 있다.

그렇게 HTML과 CSS 실습을 위해 네이버 로그인 페이지를 만들어보았다.

전체 HTML과 CSS 코드는 아래 깃허브 주소로 들어가면 확인할 수 있다.

https://github.com/J1Yun/likelion/tree/main/1.%20HTML%20%26%20CSS/NAVER%20%EB%A1%9C%EA%B7%B8%EC%9D%B8

J1Yun/likelion

🦁단국대학교 멋쟁이 사자처럼 9기. Contribute to J1Yun/likelion development by creating an account on GitHub.

github.com

3. 자기소개 페이지 실습

1주차 세션 후 자기소개 페이지를 자유롭게 만들어보라는 과제를 받았다.

세션에서 중요하게 배웠던 시맨틱 태그를 사용해서 레이아웃을 만들고 디자인은 최대한 심플하고 간단하게 적용했다.

footer 영역에는 fontawesome의 아이콘을 가져와서 나의 sns 링크를 연결했다.

이 자기소개 페이지 또한 아래 깃허브에서 확인할 수 있다.

https://github.com/J1Yun/likelion/tree/main/1.%20HTML%20%26%20CSS/%EC%9E%90%EA%B8%B0%EC%86%8C%EA%B0%9C%20%ED%8E%98%EC%9D%B4%EC%A7%80