FRONTEND/HTML, CSS

FRONTEND/HTML, CSS

[CSS] 네이밍 규칙

새로운 페이지를 만들때 항상 고민되는 변수명 짓기 Javascript에서는 흔히 Camel Case로 불리는 컨벤션 규칙을 사용한다. 띄어쓰기 없이 변수명을 붙여쓰되 이어지는 단어의 첫 글자는 대문자로 작성한다. const myName = document.getElementById('...') 하지만 CSS에서 카멜케이스 사용은 적합하지 않다. BAD .selectBtn { border: 1px solid blue; } GOOD .select-btn { border: 1px solid blue; } CSS의 네이밍 규칙중 CSS의 제작 방법론 중 하나인 BEM 규칙에 대해 알아보자. BEM 규칙 BEM은 Block, Element, Modifier 의 줄인 말로 일종의 네이밍 컨벤션 이다. 컴포넌트 기반..

FRONTEND/HTML, CSS

[CSS] 적용 우선순위

CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요, CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다. 우선순위는 아래와 같습니다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다. 출처: https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

FRONTEND/HTML, CSS

[CSS3] gradient (liner-gradient)

gradient의 종류는 총 3가지 > liner-gradient (선형 그레디언트) > radial-gradient (반지름형 그레디언트) > repeating-gradient (반복형 그레디언트) [ 방향 설정 ] - default: 위에서 아래로 방향 지정시 도착지점만 to를 사용하여 지정 ex. - 왼쪽에서 오른쪽으로: > background-image: liner-gradient(to right, black, white); - 상단 오른쪽으로 > background-image: liner-gradient(to top right, black, white); - 상단 왼쪽으로 > background-image: liner-gradient(to bottom left, black, white); [ 각..

FRONTEND/HTML, CSS

[HTML] 메타(meta) 태그

메타(meta) 태그란? 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용한다. HTML 문서의 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 HTML 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지 문자 세트 (언어 설정)는 어떤 것을 사용하는지 등의 정보를 담고있는 태그이다. ** 메타 태그는 닫는 태그가 없는 태그이다. 메타태그의 속성 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있다. - http-equiv="항목명" 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었..

숭코기
'FRONTEND/HTML, CSS' 카테고리의 글 목록 (2 Page)