본문 바로가기

프론트엔드/CSS3

[CSS] 반응형 (Responsive) - 미디어 쿼리(Media Query) 미디어쿼리 (Media Query) 반응형 웹에서는 필수인 미디어쿼리는, 화면크기 마다 각각 다르게 CSS를 적용하는 것이다. 화면 사이즈를 인식해 서로 다른 CSS를 적용시켜준다. 보통은 스마트폰, 태블릿 , PC 화면 3개 정도를 구분해준다. 미디어 쿼리를 사용해서 css에 적용하는 방법은 3가지 1. HTML의 HEAD의 link태그의 media속성에 지정하기 첫 번째는 요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러옵니다. media속성의 "screen and (min-width:0px) and (max-width:480px)"의 의미는 미디어 타입이 스크린이고, 화면의 최소 넓이가 0px, 최대 너비가 480px로 지정하는 것입니다. 그러므로 화면의 너비 480px 이하 일때가 적용이 .. 2021. 1. 11.
BEM(Block Element Modifier) 방법론 BEM이란? CSS 제작 방법론으로, 일종의 네이밍 컨벤션이라고 볼 수 있다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. 이를 통해 복잡한 UI에서도 쉽고 빠르게 인터페이스를 개발할 수 있으며 복사 및 붙여 넣기없이 기존 코드를 재사용 할 수 있습니다. - 2020 css 방법론 순위 작명규칙(Naming Convention) 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다. 소문자, 숫자 만을 이용해서 작명한다. 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다. 블록 (Block) 재사용 할 수있는 기능적으로 독립적 인 페이지 구성 요소입니다. HTML에서 블록은 class속성 으로 표시됩니.. 2020. 12. 31.
HTML&CSS_BASIC - CSS(1) : 기본문법과 선택자 , 속성과 값 div { font-size: 20px; color: red; } /* 다음과 같이 이해할 수 있습니다. */ 선택자 { 속성: 값; 속성: 값; } 선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)입니다.“빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!”, “파랑 글자색(CSS, color: blue;)은 여기 본문(HTML, )에 적용하겠어!”와 같이 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고 적용할 대상(H1, P)을 선택자로 나타냅니다. 속성(Properties)과 값(Value) 속성과 값은 글자색은 무엇, 너비는 얼마, 여백은 얼마 같은 스타일을 지정할 때 사용합.. 2020. 12. 31.