개발 메모리

문제점 Css의 Float 속성으로 Left Navigation과 Main 영역을 분할해서 레이아웃을 배치했는데, 이상하게 그 뒤에 소스 코드인 Footer 영역 코드가 아무것도 안 먹혔다. 이유가 뭔가해서 보니까 Float 속성을 해지하지 않아서 뒤에 영역까지 영향을 끼치는 문제였다. 해결방법 Css의 Clear라는 속성값을 사용해서 Float로 설정된 속성을 취소해주면 된다. clear: none /* 기본값, clear 설정하지 않는 것과 동일 */ clear: left /* 왼쪽 취소 */ clear: right /* 오른쪽 취소 */ clear: both /* 왼쪽 오른쪽 둘 다 취소 */ 나는 'clear: both'를 Footer 영역에 추가해주었더니 아래처럼 푸터에 부여한 속성값들이 올바르..

CSS 기본 규칙 선택자1, 선택자2 { 속성: 속성값; 속성: 속성값; } CSS 선택자 전체 선택자 * { box-sizing: border-box; } 태그 이름 h3 { font-size: 24px; } 아이디 맨 앞에 샵을 붙여서 #아이디_이름과 같은 문법으로 씁니다. 참고로 아이디는 한 페이지 안에서 중복으로 쓰면 안 됩니다. #hallasan { color: #f56513; } 클래스 아이디는 여러 개의 요소에 중복해서 쓸 수 없기 때문에 클래스를 사용합니다. 맨 앞에 마침표를 붙여서 .클래스_이름과 같은 문법으로 씁니다. .place { font-size: 16px; font-weight: 400; } 가상 클래스 가상 클래스는 의사 및 가짜 클래스라고도 부르는데, 요소의 상태 같은 걸 선..

CSS 변형 효과 전환(transition)은 CSS 스타일 변경을 부드럽게 표현하기 위해 지속시간을 부여하여 속도를 조절한다. 애니메이션(animation)은 하나의 줄거리(@keyframes)를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어하여 요소의 움직임을 표현한다. 변형(transform)은 요소에 이동, 회전, 확대축소, 비틀기 효과를 부여하기 위한 함수를 제공한다. 전환(transition)이란? 전환 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다. 선택자 { transition: 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음 transition-property: 트랜지션의 대상이 되는 속성 지정 transition-du..

CSS 텍스트(Text) 속성 color 속성 color 속성은 텍스트의 색상을 설정하는데, 원래 텍스트 기본 색상은 검정색이다. body { color: red; } p { color: maroon; } direction 속성 direction 속성은 텍스트가 써지는 방향을 설정하는데, 기본적으로 왼쪽에서 오른쪽 방향으로 써진다. 아랍어와 같이 텍스트를 반대 방향으로 쓰는 언어를 나타낼 때는 텍스트가 써지는 방향을 direction 속성을 사용하여 변경해줘야 한다. .leftToRight { direction: ltr; } /* 왼쪽에서 오른쪽 (기본값) */ .rightToLeft { direction: rtl; } /* 오른쪽에서 왼쪽 */ unicode-bidi 속성 direction 속성과 같이..

웹 글꼴(web font)란?CSS3에서는 웹 글꼴을 사용하여 사용자의 컴퓨터에 설치되어 있지 않은 글꼴까지 사용할 수 있다.우선 웹 폰트를 서버에 올려놓고 CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가하고 font-family 속성으로 폰트를 선택하여 사용할 수 있다.@font-face { font-family: myGothicFont; src: url(/examples/media/NanumGothic.woff); font-weight: bold; font-stretch: 150%; font-style: oblique 40deg; unicode-range: }@font-face { font-family: myMyeongjoFo..

이미지 스프라이트(Image Sprite)란? 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청해야하는데, 이미지가 많을 경우 웹 페이지의 로딩 시간이 오래 걸리게 된다. 이미지 스프라이트는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지로, 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다. 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다. 하나의 이미지를 가지고 네 개의 아이콘을 만드는 예제 .up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-re..

링크(Link) text-decoration 속성값을 none으로 설정하여, 링크가 연결된 텍스트의 밑줄을 제거한다. a:link, a:visited { background-color: #FFA500; color: maroon; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: #FF4500; } 링크(Link)의 상태 link : 링크의 기본 상태이며, 사용자가 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태 visited : 사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태 hover : 사..

Css 배경(Background) background 속성 축약 표현 background: color | image | repeat | attachment | position div { background: #FFEE99 url("http://poiemaweb.com/img/bg/dot.png") no-repeat center; width: 50vw; height: 300px; } background-size 속성 CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있다. background-size 속성값이 contain면 이미지 비율은 유지하면서 크기를 가능한 크게 조절하므로, 배경 이미지의 크기가 해당 요소의 ..

Css 크기 단위 CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다. px 단위는 스크린의 화소(pixel)를 기준으로 하는 절대적인 크기를 설정한다. % 단위는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다. em 단위는 해당 글꼴의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다. rem 단위에서 r은 root를 의미하며, 최상위 요소(html)의 사이즈를 기준으로 삼아 크기를 설정한다. #large { font-size: 200%; } #small { font-size: 0.7em; } #fixed { font-size: 20px; } Viewport 단위 Viewport 단위는 웹페이지의 가시영역인 뷰포트를 기준으로 한 ..

블록 요소 정렬(align) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 된다. 반드시 해당 요소의 width 속성값을 설정해야하며, 넓이를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백이 된다. div { width: 300px; margin: auto; } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 다른 요소와 겹칠 수 있기에, 이 특성을 이용하여 요소에 margin과 padding 속성값을 설정함으로써 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다. div { width: 300px; padding: 10px; margin: 0; positio..