<< Update: 2024.03.15 >>
개발자는... 먹고 자고 코딩하는 일밖에 없는 것 같다. (직업의 숙명..🤦♀️)
혼자 프론트엔드에 관심을 가지며 배운 내용들을 정리해보자 !!
< CSS에 대하여 >
- Html or XML 문서에 대한 스타일 시트 언어 (style sheet)
<link href="styles/style.css" rel="stylesheet" type="text/css" />- 선택자
- 속성(property)
- 속성 값: 속성에 대한 구체적인 값
- 중괄호{}를 통해 wrap. 속성-속성값은 콜론(:)으로 연결. 선언 구분: 세미콜론(;)
What is box?
- CSS 레이아웃의 박스
padding - content와 가장 인접한 공간
border - padding과 인접한 실선
margin - 가장 외부 공간
Choose 선택자!
- 요소 선택자
- 아이디 선택자(id)
- 클래스 선택자(class)
- 속성 선택자
- 수도(hover 효과)
1️⃣ 픽셀(pixel): 유동적인 조정값(글자) - fontsize / fontfamily / content
2️⃣ margin: 0; - 여백값 설정
3️⃣ display: blocklevel 설정 (img에 margin 적용 시, block)
< HTML에 대하여 >
- Hypertext Markup Language
- 콘텐츠의 구조를 정의(CSS:콘텐츠의 스타일 적용)
- 태그(Tag) 사용
구성 요소
- Opening tag: 시작 부분
- Content: 내용 포함
- Closing tag: 끝나는 부분
- Element: Opening ~ Closing
⚠️ 요소에 속성을 포함할 수 있음.(실제 내용에 포함되어 표시되지는 않는다. 요소이름/ 등호/ 인용부호를 포함)
요소 중첩
⚠️ 요소 안에 다른 요소 중첩 가능(tag 요소 내에 tag 중첩 가능)
- 제목 나타내기
<h1></h1> ~ <h4></h4>
- 주석 표시
<!--,--> // 주석은 실행되지 않음. - 문단
<p> : 문단표시 태그
<img> : 이미지 태그
<ul> : 순서없는 목록
<ol> : 순서있는 목록
<li> : 목록 내 각 항목 표시
<strong> : 강조 표시
<a> : 링크 연결 + href=""
HTML's Image?
<img> : 페이지 내 이미지 요소 삽입에 필요한 태그 <figure> : 독립적인 콘텐츠 표현(figcaption 요소를 사용한 설명 추가) <src> : 이미지의 url을 포함 - 상대/절대 url (상대 url을 선호함.) <alt> : 이미지 대체 텍스트 내용(네트워크 연결 문제 시, 이미지 표시 불가 시에 대체 텍스트로 표기) height: 이미지의 높이
width: 이미지의 너비 대체 텍스트(alt) 표기 이유?
1️⃣ 사용자가 시각적인 장애를 가지고 있는 경우 -> 스크린 리더로 내용을 해석함.
2️⃣ 잘못된 파일명, 경로 사용
3️⃣ 텍스트 유일 지원 브라우저 사용
4️⃣ 검색 엔진 사용
5️⃣ 데이터 전송 속도 및 방해 요소 감소
