누워서 떡먹기 코딩

background-image: url('이미지 주소'); 로 이미지를 넣는다. background-repeat : 배경 이미지 패턴 repeat : 가로 세로 반복적으로 배열, 기본값 repeat-x : 이미지가 가로로만 반복 repeat-y : 이미지가 세로로만 반복 no-repeat : 이미지가 반복 배열되니 않는다. background-size 속성 : 배경이미지 크기 지정 auto : 기본값으로 배경 이미지 원래의 폭과 너비 그대로 표시한다. cover : 배경지역이 배경이미지로 완전히 덮이도록 이미지를 최대한 크게해서 표시한다. 따라서 이미지의 일부분이 안보일 수 있다. contain : 너비와 높이가 내용 안쪽에 알맞은 방식으로 이미지를 가장 크게 조절한다. inital : 기본값으로 초기화..

float속성 정렬을 하기 위해 사용된다. none : 정렬X left : 왼쪽 정렬 right : 오른쪽으로 정렬 inital : 기본값으로 설정함 inherit : 부모요소로부터 상속한다 *절대 위치 요소는 float속성을 무시한다.* clea속성 : float속성값의 영행을 받지않는 속성 left : left만 무시 right : right만무시 both: 둘다 무시 float 예시1 See the Pen float by 정혜선 (@Diligent-milk) on CodePen. float 예시2 See the Pen float2 by 정혜선 (@Diligent-milk) on CodePen. float 예시3 See the Pen RwpjdpV by 정혜선 (@Diligent-milk) on Co..

position 속성 static : 모든 태그들의 기본 상태 relative : 태그의 위치를 살짝 변경하고 싶을 때 사용, static인 상태를 기준으로 주어진 픽셀만큼 움직인다. absolute : position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이다. fixed : 항상 특정 위치에 고정 position 예시1 See the Pen position by 정혜선 (@Diligent-milk) on CodePen. position 예시2 아래 예시에서 다음과 같은 코드를 썼는데 right: 0 ----> 오른쪽 끝으로 배치 bottom: 0 --->..

line-height 속성 줄 간격 지정 한줄일 경우에만 가운데 정렬을 한다. 속성 값 nomal : 기본값 보통 1.0~1.2 숫자 : 현재 글꼴 크기 * 배수이다. 예를 들어 현재 글꼴 크기가 10px이고 line-height:1.5이면 줄간격은 15px가 된다. 길이 : px, pt, cm등 고정된 간격 % : 현재 글꼴 크기의 백분율로 높이를 지정 상속 여부 : 상속 됨 음수값은 지정되지 않는다. font 속성과 동시에 줄간격 속성을 지정할 수 있다. 이때는 font: 1px/1.5 이런식으로 표시한다. line-height 예시 See the Pen line-height by 정혜선 (@Diligent-milk) on CodePen.

border-radius 속성 요소의 속성중 모서리를 둥굴게 하는 속성이다. border-top-left-radius : 왼쪽 위 모서리를 둥굴게 border-top-right-radius : 오른쪽 위 모서리를 둥굴게 border-bottom-left-radius : 왼쪽 아래 모서리를 둥굴게 border-bottom-right-radius : 오른쪽 아래 모서리를 둥굴게 border-radius 예시 See the Pen border-radius by 정혜선 (@Diligent-milk) on CodePen.

box-sizing속성 요소의 크기를 화면에 표시하는 속성 content-box: 가로, 세로 크기에 안쪽여백이 더해져서 표현 border-box: 가로, 세로 크기에 영향을 주지 않도록 표현 box-sizing 예시 See the Pen box-sizing by 정혜선 (@Diligent-milk) on CodePen.

display속성 : 화면에 보여지는 형태를 지정 요소의 inline, block, inline-block특성을 바꿔준다. inline : 내용만큼의 영역을 가지는 속성, 여백 및 크기조절이 불가능한 속성 block : 웹 페이지의 전체 너비를 영역으로 가지는 속성 inline-block: inline처럼 내용만큼의 영역을 가지면서, block처럼 여백 및 크기조절이 가능한 속성 none : 요소를 화면에서 제거하는 속성 display 예시 See the Pen MWpOzRY by 정혜선 (@Diligent-milk) on CodePen. margin과 padding 내용겉에 있는 여백이다. 아래 그림에서 272 x 92가 내용 영역이다. 그림에서 보여지듯이 padding이 더 안쪽 여백이고 margin..

https://codepen.io/trending CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 위에는 CodePen 사이트이다. 위 사이트에 들어가서 회원가입을 한 후 pen을 클릭하면 HTML작성 페이지로 넘어간다. 왼쪽 위를 눌러서 제목을 설정해줘도 되고 안 해줘도 된다. HTML, CSS, JS를 작성한 후 Save를 누르면 저장이 된다. 그리고 Embed을 누르면 된다. Embed를 누르면 새창이 하나 뜬다. 아래..

CSS(Cascading Style Sheets)는 HTML문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어이다. HTML에서 CSS가 분리된 이유는 정보(HTML)와 디자인(CSS)의 분리, 유지 및 보수의 편의성, 효율적인 재사용성 때문이다. 기본구조 h1(선택자 selector){ color(스타일 속성 property) : red(속성값 value); } 태그 정리 폰트 속성 font : 요소가 화면에 보이는 방식 지정 font - famliy : 글꼴 font - size : 글자 크기 font - weight : 글자 두께 font - style : 글자 스타일 선택자 조합해서 사용하기 1. OR 연산 쉼표 (,)를 활용하면 OR 연산이 됩니다. 두 CSS 선택자 중 하나라도 해당되면 선택합니..