Develop/Web4 [Web] CSS - 미디어 쿼리(Media Queries)를 활용한 반응형 웹 디자인 ⊙ 미디어 쿼리란? 반응형 웹 디자인을 만들기 위해 어떤 조건이나 장치 환경을 만족했을 때 css를 적용할 수 있는 방법을 제공합니다. 뷰 포트 크기에 따른 사이트 레이아웃 조절 다크 모드 지원 다음과 같은 조건들이 필요할 때 용이하게 사용할 수 있습니다. ⊙ 뷰 포트(View Port)란? 실제 내용이 표시되는 영역으로 기기마다 픽세 표시 방법이 다르기에 뷰포트를 지정해 화면을 표시한다. ⊙ 미디어 쿼리 구문 기본형 @media (조건){스타일} @media 미디어 유형 (조건) and (조건) {스타일} ⊙ 미디어 쿼리의 조건 - 웹 문서의 가로 너비와 세로 높이 (뷰포트) 종류 설명 width, height 웹 페이지의 가로 너비, 세로 넓이 min-width, min-height 웹 페이지의 최소.. 2022. 2. 12. [Web] CSS - 기본 선택자 전체 선택자 스타일 문서의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용합니다. *(애스터리스크)를 사용하여 나타냅니다. *{속성: 값;...} 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다. 예를 들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이를 나타내는 마진과 패딩을 0으로 초기화합니다. 타입 선택자 특정 태그를 사용한 모든 요소에 스타일을 적용합니다. 태그명 {스타일 규칙} 클래스 선택자 같은 태그라도 일부 다른 스타일을 사용하고 싶을 때, 타입 선택자를 이용하여 특정 부분만 스타일을 적용할 수 있습니다. .클래스명{스타일 규칙} 클래스 선택자를 이용해 만든 스타일을 클래스 스타일이라 하는데, 이미 만들.. 2021. 12. 3. [Web] HTML - 주요 시멘틱 태그 시멘틱 태그 시멘틱 태그란 '의미론적인', '의미가 통하는'이라는 뜻의 시멘틱을 사용해 이름만 봐도 의미를 알 수 있는 태그입니다. 헤더 영역을 나타내는 태그 사이트 전체 또는 특정 영역의 헤더 영역을 의미합니다. 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다. 네비게이션 영역을 나타내는 태그 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다. 웹 문서의 위치에 영향을 받지 않아 헤더나 푸터, 사이드 바 안에 포함될 수 있고 독립해서 사용할 수 있습니다. 태그를 여러 개 사용할 경우 각각의 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있습니다. 핵심 콘텐츠를 담는 태그 웹 문서에서 핵심이 되는 내용을 넣습니다. 여기에는 메뉴, 사.. 2021. 11. 29. [Web] HTML - 문서 구조 HTML의 기본 구조 보통 로 시작해 , : 웹 브라우저가 웹 문서를 해석하는데 피용한 정보를 입력하는 부분 ~: 실제로 웹 브라우저 화면에 나타나는 내용 lang 속성으로 문서에서 사용할 언어를 한국어로 지정한다. 검색 사이트에서 특정 언어로 제한해 검색할 때 결과 제공한다. 태그 1. 태그 태그: 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용 웹 서버는 영어가 기본이므로 화면에 한글로 된 내용을 표시할 때에는 UTF-8이라는 문자 세트를 사용한다고 웹 브라우저에 알려 줘야한다. 그 밖에 태그는 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 다음과 같이 지정할 수 있다. 이 정보는 검색 엔진에서 사이트를 검색할 때 참고하는데, 검색 엔진에 따라 참고하는 정보는 달라질 .. 2021. 11. 26. 이전 1 다음 반응형
