HTML+CSS

HTML HTML은 웹 페이지를 만들기 위한 언어이고, 구조를 잡아주는 역할을 한다. 브라우저는 HTML을 가지고 뭘 어떻게 그리고 만들어 줘야 할지 파악 한 뒤 웹 페이지를 생성한다. HTML 확장자 HTML은 .html 확장자가 붙은 텍스트 파일로 파일 이름은 원

스타일 속성을 이용하여 페이지를 디자인 하는 것을 style 이라고 하고, 이러한 style을 모아 놓은 것을 'stylesheet' 라고 한다. 한 문서에 같이 작성할 수도 있지만 이 후 페이지 유지 보수에 적절하지 않기 때문에 Html(구조)과 CSS(디자인)으로

01 HTML element 01-1 block element 대부분의 element(요소)는 block 요소이다. block요소는 해당 요소의 전체 가로 넓이를 모두 포함해, 따로 스타일을 적용하지 않으면 이 요소 옆에 다른 요소를 붙여 넣을 수 없다. 다음은

Float은 사전적인 의미로 '떠오르다', '떠다니다' 이다. 웹페이지 에서 객체를 왼쪽이나 오른쪽으로 배치할 때 사용된다.위와 같이 작성하여 요소를 배치할 수 있다.float 속성으로 박스를 배치하면 이어지는 다른 요소들에도 동일한 float 속성값이 적용된다. 이

CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능이다. 무조건 class나 id를 붙여 스타일을 적용하기 보다는 선택자를 효율적으로 활용할 수 있다. 01 전체 선택자 > * 전체 선택자는 HTML 페이지 내부의 모든 태그를 선택하는 선택자이다

Semantic web : 기존 웹을 확장하여 컴퓨터가 잘 이해할 수 있는 의미를 기반으로                      의미적 상호운용성을 실현, 다양한 정보들을 컴퓨터 스스로 처리, 자동화,                       재활용 등을 할 수 있도록

01 position: > selector{position: static / relative / absolute / fixed; } 02 static position 속성을 지정하지 않으면 기본값으로 지정된다. top, bottom, left, right 모든 좌표가

01 Flexbox (Flexible Box Module) > flex-direction: row / column; flexbox에서 레이아웃의 방향을 결정하는 속성이다. row가 기본값이며 메인축 즉, 가로축 방향을 설정하고 왼쪽에서 오른쪽으로 item이 정렬된

🌱 하나의 템플릿( Templete )으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹해상도 별로 보여질 화면을 초기 기획 단계에서 꼼꼼하게 정의마크업 작업을 할 때 고정된 px 값이 아닌 em, rem, % 등의 백분율 값으로 작업Media Queri

✨ 미디어 타입에 따라 스타일을 다르게 적용할 수 있는 방법 제공반응형 웹 구현 시 가장 핵심적인 요소 중 하나 !화면 크기, 해상도, 방향 등 디바이스 특성에 따라 스타일 변경 가능@media 키워드 사용하고 그 뒤에 원하는 미디어 타입과 스타일을 정의그리드 시스템을

✔️ 미디어 쿼리의 기본 구조 > 💡 미디어 쿼리의 기본 구조 ? 미디어 타입: 해당 코드가 어떤 미디어를 위한 것인지 브라우저에 알림 조건( 너비 및 높이 ): 지정한 창의 너비나 높이를 기준으로 기준 충족 시 스타일 적용 CSS: 조건을 통과하고 미디어 타입이 올바른 경우 적용될 스타일 ❓media type 실무에서 자주 쓰이는 타입은 all, ...

📖  Web > 📌 **World Wide Web internet** ? 인터넷은 TCP/IP 프로토콜을 사용하여 통신하는 전 세계 네트워크들의 집합체 하이퍼텍스트( Hypertext )로 표현되는 여러 문서들을 컴퓨터를 통해 모니터에 출력 ! 하이퍼텍스트

📌 전역 특성(Global attributes) 모든 HTML에서 공통으로 사용할 수 있는 특성 ! 일부 요소에는 아무런 효과도 없을 수 있음 ✔️ id 속성 > ❓ 문서 전체에서 유일한 고유식별자( ID, identification )를 정의 하나의 요소에 하나의 이름만 사용 가능 문서 내에 같은 아이디 중복 사용 불가 CSS, JavaScript...

📖  CSS( Cascading Style Sheets ) 💡 웹 페이지의 스타일링, 레이아웃 등의 디자인을 지정하는 언어 디자인과 스타일링: CSS를 사용해 웹 페이지의 레이아웃, 폰트 등을 지정해 웹사이트 디자인 일관성과 유지 보수성 CSS 스타일을

❓ selector ( 선택자 ) ✔️ 복합 선택자 ? 자손 선택자 div p { ... } 공백을 사용하여 하위 요소 중 해당 태그 ‘모두’를 선택 자식 선택자 div > p { ... } ‘바로 아래의 직접적인 자식’ 요소만 스타일

💡 display ? none block inline inline-block flex grid ❓  flex ❗️ flex container > 📌 display: flex container 정의 flex-direction: flex items가 정렬되는 주 축( main-axis ) 설정 justify-content: 주 축( main-axis...

❓ CSS transform > 🐋 요소의 회전, 크기, 기울기, 위치( 이동 효과 ) 등을 변형하여 다양한 시각적 효과 구현 ✔️ rotate() 입력한 각도만큼 회전 양수: 시계 방향 회전 음수: 반시계 방향 회전 단위: deg, turn ✔

📖 반응형 웹사이트 > 🐋 하나의 템플릿( Templete )으로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹 ❓ media query 브라우저의 화면 크기나 장치 종류에 따라 다르게 적용할 수 있게 하는 CSS 기능 웹 페이지의 레이아웃을 화면에 맞게 조정하거나 특정 장치에서 특정 스타일을 적용 ✔️ 미디어 유형 설정 scree...