자바 웹 개발자가 될거야/WEB (20) 썸네일형 리스트형 [CSS] 반응형 웹 디자인 - Media Queries - 스마트폰, 태블릿, PC에 따라 CSS를 달리 줄 수 있음 - 기본 스타일을 스마트폰 기준으로 작업함 @media [not|only] 장치종류 and (조건){ 선택자{속성:속성값;} } - 띄어쓰기 민감하니까 잘 체크 ! - 장치 종류 · all · print · screen : 우리가 보는 스크린형태 종류 · speech : 음성낭독기 - 조건 · viewport의 너비와 높이 · 장치의 너비와 높이 section{ border: 4px double #999; padding: 1em; background-color: #0ea; } @media screen and (min-width:760px) { section{background-color: #aea;} } @media scr.. [CSS] transform 속성 ① translate() - 위치 변형 함수 - 괄호안에 값을 적어줌 .tra01{transform:translateX(800px);} .tra02{transform:translateY(200px);} .tra03{transform:translateX(-80px);} .tra04{transform:translateY(-20px);} .tra05{transform:translate(900px,-150px);} · translateX() : 괄호 안의 숫자만큼 수평 방향으로 이동 (음수면 왼쪽으로, 양수면 오른쪽으로) · translateY() : 괄호 안의 숫자만큼 수직 방향으로 이동 (음수면 위쪽으로, 양수면 아래쪽으로) · translate(x,y) : 괄호 안의 숫자만큼 수평.. [CSS] Position 속성 - 요소의 위치를 지정해버리는 속성 - 위치가 표현되는 방식의 차이 ① position : static - 기본값- 정적으로 배치된다- top, bottom, left, right 속성의 영향을 받지 않는다- 이 상태에선 요소를 이동할 수 없다- 항상 페이지의 정상적인 흐름에 따라 배치된다 .st01{ position:static; left:600px } · 왼쪽에서부터 600px만큼 떨어진 위치로 이동하라고 해도 그 자리 그대로 ② position : relative - 원래 자리에서부터 top, bottom, left, right 배치 - 수평과 수직 방향으로 동시에 움직이면 사선으로 움직임 .re01{position:relative; left:600px;} .re02{posi.. [CSS] Overflow 속성 - 영역 밖의 내용 처리법을 지정하는 속성이다 - overflow 속성을 더 잘 보이기 위해서 html 코드에 여러줄 띄워서 text 3줄 + 민트색 영역 표시함 ① overflow : visible (기본) - 영역 밖에 넘친 부분도 보이게 함 #sec01>p {overflow: visible;} - 영역 밖이지만 사진 보여줌 ② overflow : hidden - 영역 밖에 넘친 부분은 안보이게 함 #sec02>p {overflow: hidden;} - 이미지가 있지만 영역을 벗어나면 안보인다. 영역을 넓혀주면 ? - 긴 글일 경우 ...(말줄임표) 표시하기 .ell{ white-space: nowrap; overflow : hidden; text-overflow: ellips.. [CSS] display 요소 - inline 요소 · 자동 줄 안바뀜 · 가로, 세로 같이 크기 적용 불가 · 상하 margin 적용 불가 · 한 줄에 나란히 배치 - block 요소 · 자동 줄 바뀜 · 크기 적용 가능 · 상하좌우 margin 적용 가능 · 한 줄에 나란히 배치 불가 ① display : inline - block 요소를 inline으로 바꿈- block 요소 : p, div, h4 background-color: #3af; width: 300px; height: 50px; margin: 30px; display: inline; ② display : block - inline 요소를 block으로 바꿈- inline 요소 : a, b, span background-color: #a3f; wi.. [CSS] ul로 메뉴바 만들기 - 가로로 나란히 표현하기 위해서 float : left 사용 #menu{ border:1px solid orange; clear: both; } #menu>ul { list-style-type: none; } #menu>ul>li{ border:1px solid green; float: left; margin-left: 1em; } [CSS] float 속성 - float가 둥둥 띄운다는 의미로 사진과 글을 함께 쓸 때 글이 사진을 감싸는것처럼 보이게 해준다. - 층이 있다고 생각해야한다. ① float : left #sec01 img{width:220px; float:left; margin-right:1em;} - 사진과 글 사이 여백을 주기 위해서 margin-right 사용 ② float : right #sec02>p {text-align:right;} #sec02 img{width:220px; float:right; margin-left:1em;} - 사진과 글 사이 여백을 주기 위해서 margin-left 사용 - 사진쪽으로 글자 정렬을 바르게 하기 위해서 text-align : right 사용 ③ float : left, f.. [CSS] 마진(Margin) 속성 - 테두리 외부의 여백을 의미함 ① 패딩 방향별 적용법 - 위쪽, 오른쪽, 아래쪽, 왼쪽을 방향별로 여백을 줄 수 있다. - 보통 좌우여백을 %로 두고 상하는 고정해둠 .mt{margin-top: 50px;} .mr{margin-right:15%;} .mb{margin-bottom:3em;} .ml{margin-left:20%;} ② 패딩 값 갯수별 적용법 - 여러 단위 따로따로 적용가능하다 - 마진이 겹칠 수도 있는데 간섭이 생기면서 큰 마진값이 작은 마진값 흡수함 - 값이 1개일 때 : 네 방향 모두 n으로 동일 - 값이 2개일 때 : 상하 n1, 좌우 n2만큼 적용 - 값이 3개일 때 : 상 n1, 좌우 n2, 하 n3 만큼 적용 - 값이 4개일 때 : 상 n1, 우 n2, 하 .. 이전 1 2 3 다음
