HTML. CSS (6) 썸네일형 리스트형 css 사이즈 태그 em, rem, vh, vw, vmin, vmax 완벽 정리 css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다.. 하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 깔끔한 코딩이 완성되므로, 숙지할 필요가 있다. 꼭 암기해서 다음 플젝 때는 요 요소들을 활용해 보자! (는 의미에서 작성한 포스팅..) 1. em : 부모 사이즈에서 곱한 사이즈 div {font-size: 14px} p {font-size: 1.2em} 일 경우, p의 사이즈는 14*1.2 = 16.8px 이 된다. 2. rem: 부모가 아닌 최상위 태그에서 곱한 사이즈 em을 사용하다보면 점점 사이즈가 커져버려서 제어가 힘든 상황이 온다. 이.. P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기 HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다. 그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다. HTML5 등장 이전에 통용되던 개념은 "인라인 요소 안에 블록을 넣을 수 없다" 였지만, 시맨틱 구조의 출현으로, 사실상 우리는 a앵커 태그 안에 블록 요소를 넣는 행위?를 밥먹듯이 하고 있다. 하지만 아직까지 전통적으로 인라인 레벨 요소로 불리던 것들 button, input, i, 등등의 요소에는 블록 요소를 집어넣어서는 안된다.. 이건 시맨틱 구조로도 납득되지 않는 부분들이다. 이와 더불어 우리가 쉽게 간과하지만 그래서는 안되는 부분이 있다. 바로 P태그다. P태그 안에 블록 요소를 넣으면 안된다. p태그는 블록요소다. 여기서 블록/인라인이 .. 모달창 VS 팝업창, 차이가 뭔데? "팝업창 말고 모달창으로 만들어줘~" "이번 모달창은 iframe으로 만들어~" 입사 초기에 모달=팝업 이라고 생각했던 무지한 나에게 이런 요구사항들은 당황스러웠다. html 공부할 때 그저 모달창은 div로 묶어 만든다...는 식으로 들었기 때문에, 정확하게 팝업과의 차이를 모르겠더라. 그래서 그 개념을 정리할 필요성을 느꼈다. **팝업창 우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다. (브라우저에서 팝업창을 강제로 막아놓을 경우 보이지 않는다) 자바스크립트로 팝업창을 띄울 때, window.onload = function(){ window.open("popup.html", "",.. 배경 위에 또다른 배경을 깔고 싶을 때 css 방법 (html 요소 사이에 레이어 추가) 박스마다 각기 다른 배경 이미지를 넣었는데, 이 배경 이미지가 호버될 때마다 명암을 달리 주고 싶어졌다. 다시 이미지를 수정해서 집어넣기도 귀찮았고, 호버되려면 이미지를 추가할 것이 아니라 css 효과를 집어넣어야 하므로. css로 조절할 수 있는 방법을 찾아야 했다. 예시) 요렇게 핑크색 박스(div class="pink") 안에 배경(h1)이라는 텍스트와 파란색 또다른 상자(div class="blue") 콘텐츠가 들어있다. 핑크색 배경 이미지 위로 레이어를 하나 더 깔아서 효과를 주고 싶었다. 빗금친 영역을 추가하기 위해 .pink에 가상연산자를 잡아서 스타일을 줬다. .pink:before{content:""; width: 100%; height: 100%; position: absolute; t.. 홈페이지 드롭메뉴 전체 배경 들어간 HTML + CSS 짜기 쉽다고 생각하던 HTML이 배신 때리던 날. 드롭메뉴를 짜다가 갑자기 배신당한 기분이 들어 오늘의 코드를 기록으로 남긴다.. 오늘은 메뉴1을 호버하면 전체 소메뉴들이 다 보여지는 코드를 짜봤다. + 뒤에 배경까지 덤. (사실 디자인이 별로라는 소리를 들어서 수정한 건이었다..) 개인적으로 소메뉴가 많으면 메뉴1에 따른 소메뉴만 보여지게끔 짜는게 좋지만(가독성 up), 소메뉴 갯수가 적다면 (7개 이하 정도) 전체 메뉴가 한번에 다 보여지게끔 하는 편이 낫다고 생각한다. 메뉴가 별로 없는데 일일이 호버하면서 찾기 번거롭기도 하고, 디자인이 좀 읎어보임.. 암튼 HTML은.. 메뉴1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 메뉴2 소메뉴2-1 소메뉴2-2 소메뉴2-3 소메뉴2-4 메뉴3 소메뉴3-1.. 두 줄 이상 텍스트 세로 중앙 정렬하는 방법 한 줄 짜리 간단한 텍스트는 line-height이나 padding 값 등등으로 중앙 정렬을 얼추 맞출 수 있다. 안녕하세요 텍스트가 2줄 이상이 되면 어떨까. line-height 를 적용하면 참변을 당한다. padding이나 margin으로 얼추 맞추는 것도 가능하겠지만, 길이가 서로 다른 여러개의 텍스트 박스를 정렬해야할 경우엔 맞추기가 어렵다. 일일이 하나하나 패딩값을 주기도 어려움. 이럴때 사용하는 세로 중앙 정렬 방법들을 소개한다. 1. position으로 50%, 50% 정렬 후 transform 하기 position으로 top과 left를 각각 50%로 적용하면 텍스트의 시작점이 중간으로 온다. 텍스트 길이에서 반 만큼 땡겨와야 정확히 중간 지점을 찾을 수 있다. HTML 삽입 미리보기할 .. 이전 1 다음
