달밤에 코딩하기/HTML CSS Tip! (5) 썸네일형 리스트형 헥사(HEX) 투명도(%) 적용하기 컬러에 투명도를 적용할 때 아래와 같이 두 가지로 작성할 수 있다. 물론 Opacity도 있지만 이는 자식 요소의 투명도에도 영향을 미치기 때문에, 컬러의 투명도만 조정하려는 의도면 아래 두 가지만 사용한다. .p1{color : rgba(255, 255, 255, 0.5);} .p2{color : #ffffff80;} p1과 p2는 모두 흰색, 투명도 50%를 뜻한다. p1의 경우, RGB 값을 알아야 하므로, 투명도는 쉽게 쓸 수 있지만 컬러값을 적기가 번거롭다. p2의 경우는 헥사코드에 투명도 값을 넣는 것이기 때문에, 자주 투명도를 표기하는 것이 아니라면 이가 더 편리하다. #ffffff80에서 80은 50%를 뜻하며, 각 투명도를 아래에 표기했다. 이제 원하는 헥사코드 뒤에 아래 번호 2자리를 .. 미리 작성하면 좋은 코드 정리 HTML Head Head 영역 한눈에 보기 상세 설명 Viewport viewport로 디바이스 표시 영역에 대한 정의가 가능하다. width : 화면에 표시 될 가로사이즈를 정의할 수 있다. device-width는 "기기의 가로 값을 사용하겠다."라는 의미다. initial-scale : 초기 화면 배율 설정이다. 1일 경우 "화면의 사이즈를 원본 사이즈(1)로 사용 하겠다."라는 의미다. user-scale : 사용자가 확대 및 축소를 허용하는가 여부를 정의할 수 있다. maximum-scale : 최대 확대 비율 설정이다. 1을 설정할 경우 확대 되지 않는다. minimum-scale : 최소 축소 비율 설정이다. 1을 설정할 경우 축소 되지 않는다. 오픈 그래프와 트위터 카드 오픈 그래프와 트.. CSS 이름 작명 규칙 (BEM) 개발자에게는 CSS의 이름을 작성할 때 일정한 규칙이 있으며 이를 BEM 방법론이라고 한다. BEM이란? Block-Element-Modifier의 약자로 CSS 클래스 이름에 대한 작명 규칙 표준이며 Sparkbox에서 널리 사용된다. BEM의 장점 BEM 규칙을 통해 아래 장점을 가질 수 있다. 목적과 기능 전달 구성 요소 구조 전달 스타일 선택자에 대한 낮은 수준의 일관성을 설정 작성 방법 구성 요소 BEM 클래스는 3개 부분으로 구성되며, 순서와 예시는 아래와 같다. 블록 : 상위 요소 요소 : 자식 요소 수정자 : 변형 요소 Placeholder 스타일 적용하기 Placeholder의 스타일 변형은 표준이 아니다. 따라서 브라우저에서 제공하는 기능을 사용하여 Placeholder의 스타일을 변경할 수 있다. 문제 발생 Placeholder의 스타일 변형은 표준이 아니기 때문에 placeholder의 스타일을 표준 css로 변경 불가능하다. HTML CSS /*CSS 입력하지 않음*/ 문제 해결 각 브라우저에서 제공하는 placeholder 변형 기능을 활용하여 placeholder의 스타일을 변경한다. 이때 각 브라우저의 접두사를 붙여 스타일을 정의해야 하며, 오페라는 placeholder의 스타일 변형을 지원하지 않는다. 브라우저 별 접두사 크롬 : Webkit 익스플로러, 엣지 : ms 파이어폭스 : moz 오페라 : o HTML CSS .input--tex.. float 부모 높이 값 문제 해결하기 Float는 '뜨다'라는 의미가 있다. 이와 같이 float를 설정하면 해당 요소가 동동 뜨기 때문에, 부모가 요소의 높이를 파악하지 못하는 경우에 아래와 같이 해결할 수 있다. 문제 발생 Float를 자식 요소에 사용 시, 부모 요소가 자식의 높이값을 인식하지 못함. HTML CSS .container{ border: 8px solid red; } .container div{ float: left; width: 200px; height: 200px; border: 8px solid blue; } 문제 해결 clearfix라는 클래서에 float요소를 지우는 clear를 넣어 부모 요소에 적용한다. HTML CSS .clearfix::after{ content: ""; clear: both; displa.. 이전 1 다음
