Web_UI

💬잠시 잊고 지냈던 HTML과 CSS를 다시 복기하고자 공부 시작합니다! 무료강의 최고시다💝

1. HTML 웹 페이지를 만드는 언어 Hyper Text Markup Language 2. HTML 문법 [1] 태그

🤍 HTML 태그를 알아보자! 현재 HTML 태그의 개수는 대략 130여 개 정도이다. 하지만 사용하는 건 대략 25개 정도..!?

🎀 나머지 태그들도 살펴보자!

🧀콘텐츠 모델 - HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 `규칙들`이 존재한다. - 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 `콘텐츠 모델`이다.

🥞시멘틱 마크업 해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 `시멘틱한 마크업`이 필요합니다. 인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있다.

🍟블록&인라인 이전 포스팅에서 살펴본 콘텐츠 모델은 사실 나중에 좀 더 복잡하게 분류된 것이고, 그 이전에는 요소들을 크게 블록 레벨과 인라인 레벨로 구분했었다.

🟣🟡🔴CSS는 Cascading Style Sheets로 HTML을 꾸며주는 언어! html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할이다.

👌 CSS 선택자 선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와준다. 👌 기본 선택자, 문서 구조 관련 선택자, 가상 선택자를 알아보자

👠 CSS의 구체성 , 상속 , 캐스케이딩

💚 CSS 속성을 공부하기 좋은 사이트 💚 속성 - 단위, 색상 & background

💚 속성 - boxmodel, border, padding & margin, width & height

✅ 타이포그래피(typography) ✅ font-family : 글꼴 지정 ✅ line-height : 행간 조정

🍞 font-size(크기) , font-weight(굵기) , font-style(스타일) , font-variant(대소문자변환)

🥞 font & webfont , vertical-align (수직 정렬) , text-align(수평 정렬) , text-indent (들여쓰기) , text-decoration

🛫레이아웃 🛫display, visibillity, float, clear

🚀 position , z-index , HTML/CSS 유효성 검사

💗미디어쿼리(Media Queries)는 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만든다! 💓 미디어 타입, 미디어 특성, Syntax

🧶CSS 리셋 🧶어떤 브라우저에서든 사용자들이 동일한 경험을 할 수 있도록 크로스 브라우징 원칙을 지켜서 코딩해야 한다.

😶 IR 기법 Image Replacement 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것

🙇🏻‍♂️ float 해제하는 방법은 꼭 알아둬야한다! float이라는 속성은 주어진 요소뿐만 아니라 주변의 요소들의 배치에도 영향을 주어서 사용하기 까다롭다.

🔗웹 페이지의 레이아웃이란? 🔗메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업 🔗종류 1단 레이아웃, 다단(2단, 3단..) 레이아웃, 고정(상, 하단 고정) 레이아웃

💟메뉴 : 사용자가 웹 사이트 내에 있는 다양한 페이지를 이동할 수 있도록 지원한다. & 웹사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다.

🧡 탭 : 여러 문서 또는 패널을 하나의 창에 두고 전환하여 볼 수 있도록 한 인터페이스

📷 이미지 목록 소개 이미지와 함께 압축된 정보를 제공하여 콘텐츠를 미리 보여주는 역할 (섬네일)

🛒 html에서 테이블 태그는 표를 만들때 사용한다

🎉 팝업이란? 🎉 특정 영역의 위치에, 🎉 특정 사이즈의 레이어(창)를, 🎉 특정 시점에 노출

🚀 반응형 웹사이트 🚀 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지 🚀 PC, Tablet, Mobile 에 따라 반응되는 사이트