개발블로그

반응형 웹 * 반응형 웹이란? PC, TV, 스마트 기기 등 사용자의 다양한 기기에 따라 웹 사이트 크기가 달라지는데, 그런 접속환경에 맞춰서 최적화된 화면의 레이아웃으로 바꾸어 주는 것이다. 보통 모바일(320px이상), 태블릿(768px이상), PC(1024px이상)를 기준으로 설정한다. * 뷰포트(viewport) 스마트 폰 화면에서 실제 내용이 표시되는 영역 pc화면에 맞춰 제작된 웹사이트들을 스마트 폰으로 보면 글자가 작아짐 -> pc화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문 뷰포트를 지정하면 기기의 화면 크기에 맞게 확대하거나 축소해서 표시할 수 있다. 기본형식 뷰포트 속성 ex) -> 내용은 기기의 폭에 맞춰 조절되고, 초기값은 원본 비율로 출력된다 뷰포트 단위 첫번째 '안녕하세요'..

list style * 리스트의 모양을 꾸미는 CSS3 프로퍼티 1. list style-type : 아이템 마커 타입 지정 - 디폴트 : disc (채워진 동그라미) - circle (안채워진 동그라미) - square (채워진 사각형) - none, upper-roman(Ⅰ,Ⅱ,Ⅳ...), lower-alpha(a,b,c...), decimal(1,2,3...) 등 2. list-style-image : 아이템 마커 이미지 지정 list-style-image : url("images/marker.png"); 3. list style-position : 아이템 마커의 출력 위치 지정 커피메뉴 Espresso Cappuccino Cafe Latte ul 스타일에 list-style-position: in..

글자 가로 가운데 정렬하기 home shop notice mypage * 메뉴를 가로로 정렬하고, 사이즈를 주고싶을 때는 p에 position : inline-block을 사용한다. 1. width, height만 줘서는 박스 사이즈가 적용되지 않는다 : inline-block 필수 2. inline을 할 경우 메뉴 글자만큼만 사이즈로 인식한다. * p태그들을 가운데로 배치시키고 싶으면, div로 묶어주고 그 div에서 text-align : center를 준다. 이미지 가로 가운데 정렬 * inline-block은 가 아니라 태그에 적용시켜야 한다. * p박스 안에 이미지를 다 채우려면 똑같이 img에도 width와 height 를 적용시킨다. * img:hover 이미지 마우스 오버시 효과주기 p:h..

position 속성 1. static : HTML태그가 작성된 순서대로 위치한다(디폴트) top, bottom, left, right 값은 적용X 2. relative : 현재위치에서 top, bottom, left, right 속성값만큼 이동한 위치에 배치 top/bottom 동시지정 시 bottom 무시 left/right 동시지정 시 right 무시 3. absolute : top, bottom, left, right 속성값으로 정한 절대위치에 배치 - position : absolute를 추가하고, top/left 등은 입력하지 않을 경우 순서대로 배치된다. - top: 0, left: 0을 넣어주면 브라우저 왼쪽 상단 모서리에 위치한다. - top: 100, left:100 의 경우 모서리에서..

Consolas font font-weight 900 현재 크기의 1.5배 크기로 hn 태그의 폰트 수정 문제의 첫번째 줄 consolas font는 h1태그를 사용하여 css에 font-style과 family를 주었다. 그런데 속성을 두번 주기 번거로워서 font 속성만으로도 작성할 수 있는지 확인해봤다. font: italic 100% 'consolas font'; 이렇게 font size를 100%로 줄 경우 h1 사이즈 그대로 출력될 줄 알았으나 더 작은 사이즈로 출력이 되었는데, 그 이유는 font-size는 브라우저 기준으로 16px의 100%가 출력 된 것이다. 1rem, 1em 도 마찬가지. h1사이즈로 맞추려면 더 번거로워지므로 font-size, font-family 이렇게 주는게 낫..

구조 가상클래스 - :first-child, :last-child, :nth-child(n) 구조가상클래스로 풀려고 했는데 도저히 안되서 deepskyblue(#00BFFF) brown(#A52A2A) fuchsia(#FF00FF) darkorange(#FF8C00) darkcyan(#008B8B) olivedrab(#6B8E23) 결국 이런식으로 각각에 스타일을 줬다. 구조 가상클래스로 주기 위해서는 1. div들을 div로 한번 묶어서 div div:first-child { } (반드시 div div처럼 상위, 하위 요소를 다 입력해야 에러가 생기지 않는다) 이런식으로 주거나 CSS3 색 활용 deepskyblue(#00BFFF) brown(#A52A2A) fuchsia(#FF00FF) darkora..

글자 태그 : 제목글자태그. 부터 까지 있으며, 이 글자 크기가 제일 크다. - title : 툴팁달기(커서를 올리면 설명을 보여준다) : 문단 태그. 태그들 사이에는 약간의 공간이 있다. : 다음줄로 이동. 닫는 태그 필요 없다. : 띄어쓰기 여러 번 사용 시 그대로 출력. 에서는 띄어쓰기 여러번 해도 한번으로 출력됨 *글자모양태그 - 글자모양태그 안에 본문태그, 제목태그 사용 불가 : 굵게. 음성강조X : 굵게. 음성강조O (화면 낭독기에서 강조) : 이탤릭체 : 작은글자 : 취소선 : 밑줄 : 아래 첨자 : 위 첨자 : 하이라이팅 : 가로선(수평선) *특수문자 표기 > (빈칸) 이미지 태그 : 이미지태그 - src : 경로. 파일 경로 또는 인터넷에 올라온 사진의 주소 - alt : 이미지가 없을때..