![]()
.inner { width: 1400px; margin: auto; position: relative; box-sizing: border-box; } /* min-width : 최소 max-width : 최대 */ /* min-width : 최소 1600보다 작으면 스크롤바 */ div {} div#wrap { width: 100%; min-width: 1600px; } header {} header#header { width: 100%; background: antiquewhite; } header#header div {} header#header div.inner { /* width: 1400px; */ /* margin: auto; */ height: 150px; /* position: relati..
![]()
1) padding, border, margin 2) text-align, margin : auto 둘 다 부모에 작성 text-align : center; : 부모(block) 안에 요소들이 inline 일 때 (모든 자식들이 상속) margin : 0 auto; : 부모(block)안에 요소들이 block 일 때 (너비 필수) * inline : a, span, strong, em, b, i (너비를 자기 자신만큼 차지 -> 옆으로 나열) block : div, h, p, ul, li, il, dl, dd (너비를 부모 크기의 100%만큼 차지) inline-block : img, dt, button, input 3) line-height : 글자 간 행간 4) border-radius : 모서리 둥..
transition opacity 1) transition + opacity 사진 두 장을 img로 불러오고 absolute를 사용해 겹친 다음 첫 번째 사진에만 효과를 주었다. 1초 동안 ease-in-out 방식으로 opacity: 0 을 주어 사라지게 했다. 이번엔 사라지지 않고 translateX를 사용해 x축 방향으로 +600px만큼 이동하게 해 보았다. 부모에 overflow:hidden을 넣어 첫 번째 사진이 이동을 하면 자연스럽게 숨겨지도록 했다. 사진을 한 장만 불러오고 scale을 사용해 크기가 130%가 됨과 동시에 15deg만큼 회전하게 했다. 마찬가지로 회전하면서 부모의 크기를 넘는 부분은 hidden을 사용해 숨김처리 하였다.
![]()
transform transitions 1) transform 위치를 이동시키거나 크기를 늘이거나 줄이고, 회전, 기울기를 줄 때 사용한다. 1번 박스의 transform: translate는 자기 자신의 위치를 기준으로 이동하며 translate(x, y) 혹은 translateX(x) translateY(y) 로 각각 x축, y축을 적용시킬 수 있다. 2번 박스는 translateX가 적용된 모습. 3번 박스의 scale은 너비와 높이를 늘이거나 줄일 때 사용하는데 scale(너비, 높이) 혹은 scaleX(너비) scaleY(높이)로 적용할 수 있다. 4번 박스의 rotate는 회전을 시킬 수 있는데 360도 기준으로 deg값을 양수 혹은 음수가 사용 가능하다. 5번 박스 처럼 rotateX, ro..
![]()
폰트아이콘 position 1) 폰트아이콘 아이콘을 html에 불러오는 방법들 중 XEIcon의 아이콘을 불러와 보았다. 위 내용을 head문 안에 붙여 넣는다. https://xpressengine.github.io/XEIcon/library-2.3.3.html XEIcon, 문자를 그리다 XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다. xpressengine.github.io XEIcon 페이지 에서 원하는 아이콘을 고른 후 이름을 복사한다. 복사한 이름을 class 명에 넣으면 그대로 아이콘이 나오게 된다. ul li { margin-left: 40px; } ul li i { font-size: 40px; color: ..
![]()
position: absolute position: fixed position: z-index 1) position: absolute 위치를 설정하고 고정할때 사용한다. absolute, fixed, z-index를 뒤에 붙여 사용한다. absolute는 부모를 기준으로 상하좌우 절대위치를 조절한다. 만약 부모에 기준이 없으면 body가 기준이 되며, static은 부모의 기준에서 제외된다. 단위는 px, %를 사용한다. div:nth-child(1) { position:absolute; left: 0; top: 0; } div:nth-child(2) { position: absolute; right: 0; top: 0; } div:nth-child(3) { position: absolute; botto..
![]()
내부/외부링크 visibility float flex justify-content align-content align-items 1) 내부/외부링크 a 를 사용해 페이지 내 혹은 다른 페이지로 이동하는 연결 링크를 만들 수 있다. 제목1 제목2 제목3 제목4 타이틀1 타이틀2 타이틀3 타이틀4 위와 같이 타이틀이 적힌 box 4개를 각각 제목 1,2,3,4에 링크가 걸리도록 만들어 제목1을 누르면 box1이 있는 타이틀1로 화면이 이동하게 된다. 페이지 내부에서 뿐만 아니라 다른 페이지로도 링크를 연결할 수 있다. 제목1 제목2 제목3 제목4 2) visibility 화면에는 존재하나 보이지 않게 하고 싶을때 사용한다. *주로 장애인들을 위해 만들어 놓은 본문바로가기/메뉴바로가기에 쓰인다고 배웠다. .b..
![]()
background 다중 이미지 선택자(first-child, last-child, nth-child(), first-of-type) ::before ,::after vertical-align w00p=width: 100%; h100p=height: 100% 1) background 다중 이미지 background 한 줄만으로 여러 사진을 각각 다른 위치에 불러올 수 있다. 부모 박스의 크기가 서로 다른 배경에 총 3가지 이미지를 조합해 만들어 보았다. background: url(images/img1.png) 0 0 no-repeat, url(images/img3.png) right 0 no-repeat, url(images/img2.png) 0 0 repeat-x; img1은 0 0 위치에서 부터 반..
![]()
구글 폰트 border-radius box-shadow/text-shadow overflow text-overflow background text-align: center;=tac width=w height=h border: 1px solid #000;=bd 1) 구글 폰트 구글 폰트를 css 파일에 적용시키는 방법을 배웠다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 마음에 드는 폰트를 고른 후 우측에 + 버튼을 누른다. (옆 숫자는 font-weight) 여러 폰트를 한 번에 받을 수 있다. @import를 선택한 뒤 ..
