EunSeo's Dev Story

박스 모델과 관련된 CSS 속성들 - .html 파일에서 .(dot)을 입력하고 내가 사용할 class의 이름을 입력하게되면 자동완성 기능을 통해 사용할 클래스 이름의 div 태그가 자동완성된다. .container { background-color: orange; height: 200px; padding-top: 30px; padding-left: 30px; width: 70px; } .item { background-color: royalblue; height: 70px; max-width: 150px; margin-bottom: 30px; border: 4px solid red; border-radius: 30px; box-shadow: 30px 10px 30px rgba(0,0,0,0.5); } ..

CSS는 이렇게 작성해야해요 h1{ color: red; font-size: 30px; } 선택자 {속성: 값;} - 선택자의 개념은 HTML 파일의 어떤 요소를 선택할 것인지 정하는 것이다. - "속성: 값 ;"의 형태가 여러 개 있을 수 있다. - .html파일에서 class 속성을 가지고 있는 요소를 변경할 경우 .class 이름을 적어준다. CSS 선택자 태그 선택자 클래스 선택자 - 클래스를 선택할 경우 . (dot)을 사용해야 된다! 하위 선택자 - 하위선택자는 div라는 요소 안에 들어있는 것들 중에 .orange class를 가지고 있는 요소들을 의미한다. - 띄어쓰기는 하위 선택자라는 것을 의미한다. - 위 코드 해석은 .orange라는 클래스의 요소들을 찾는데, div의 하위인 요소들을..

01 박스 모델 박스 모델 구조 - 컨텐츠를 감싸는 3가지의 축 margin과 padding의 차이 - margin -> border -> padding 순서로 여백을 만든다. margin과 padding을 작성하는 방법 - margin-left, margin-right 등 직접 값을 지정해도 되지만 위 코드처럼 한 줄에 작성이 가능하다. - {margin : top right bottom left;} 순서로 값이 적용된다. 02 Block 요소와 Inline 요소 - block 요소 : Y축을 기준으로 요소들이 생성된다. - inline 요소 : X축을 기준으로 요소들이 생성된다. Block 요소의 특징 03 margin 병합 현상 형제지간의 마진 병합 - 다음과 같이 top과 bottom일 경우에 둘..

01 Cascading : 우선순위를 결정하는 방법 CSS의 우선순위를 결정하는 세 가지 요소 1. 순서 2. 디테일 3. 선택자 순서에 의한 캐스케이딩 : 코드는 위에서 아래로 실행되기 때문에 나중에 적용한 값을 따른다. 디테일에 의한 캐스케이딩 : 부모 자식 태그 간 더 자세하게 나와있는 선택자를 따른다. 선택자에 의한 캐스케이딩 : 구체적으로 명시된 태그순으로 강도가 높다. 02 CSS 주요 속성 Width, Height - width 속성 : 선택한 요소의 너비를 설정, 픽셀(px), 퍼센트(%), 픽셀은 고정적인 크기, 퍼센트는 유동적인 크기를 갖는다. - height 속성 : 선택한 요소의 높이를 설정 font - font-family : 브라우저마다 지원하는 폰트가 다르다. 입력한 순서대로 ..

01 CSS - Cascading Style Sheet CSS란? - 정보 (HTML)와 디자인 (CSS)의 분리 - 문서의 레이아웃과 스타일 정의 - HTML로 작성된 정보를 꾸며주는 언어 CSS 구성 요소 선택자 {속성 : 속성값;} - 선택자 : 디자인을 적용할 HTML 영역 - 속성 : 어떤 디자인을 적용할지 정의 - 속성값 : 어떤 역할을 수행할지 구체적으로 명령, 세미콜론(;)필수 입력 속성 Property h1{ font-size: 20px; /*폰트 사이즈*/ font-family: sans-serif; /*글꼴*/ color: blue; /*폰트 색깔*/ background-color: yellow;/*배경색*/ text-align: center; /*텍스트 정렬*/ } CSS 연동 방법..