DevSSOM

형제간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } 한 쪽은 150px이라고 하는 margin-bottom이고, 한 쪽은 100px margin-top이니까 box1과 box2영역의 마진 부분이 겹쳐. 공통된 부분을 두 개의 영역이 공유하게 되면, 이 공간의 크기는 250px이 되는게 아니라 150이 됨. 항상 큰 값에 우선순위가 있어서 큰 값이 작은 값을 병합시켜버리는 것. 부모-자식간의 마진 병합 /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } main이라고..

박스 모델 구조 박스 모델은 웹사이트 레이아웃을 구성할 때, 공간의 크기가 어떤 구조로 구성되어 있는지, 그 구성물들 자체를 통틀어 박스 모델이라고 얘기함. 박스 모델은 margin, border, padding, content 4가지 요소로 구성되어 있음. 박스 모델을 잘 이해해야 다른 웹사이트의 레이아웃 구조를 파악하기 쉽기 때문에 이 4가지는 반드시 기억하기. margin과 padding의 차이 margin과 padding은 border를 기준으로 생각하면 됨. 박스에 border가 있다고 가정했을 때(border를 사용하지 않았다면 border=0으로 생각), border의 바깥 쪽은 margin, 안쪽은 padding. margin-left, right, top, bottom : border 바..

width, height 특정 영역에 공간을 설정할 때 사용. 고정적인 공간을 만들고 싶을 때 px(픽셀) 단위로 표시. 고정값(px), 가변값(%). 공간을 꽉 채우고 싶다면 px 지정하는 대신에 100%를 입력하면 돼. 부모 영역 크기의 100%. width : 선택한 요소의 넓이를 설정. height : 선택한 요소의 높이를 설정. 프로그래밍을 배워봐요! .paragraph { width: 500px; height: 500px; } font font-size : 글자 크기를 바꿀 때 사용. 마찬가지로 고정된 크기를 표현할 때는 px(픽셀) 단위 입력. font-family : 서체를 지정할 때 사용. 브라우저마다 지원하는 폰트가 다름. 만약에, 특정 브라우저가 A라는 폰트를 지원하지 않는다면, B라..

캐스케이딩 : CSS의 우선순위를 결정하는 세 가지 요소. 1. 순서 동일하게 태그를 선택한 상황에서, 같은 속성을 사용하는데 속성값만 다름. 이 경우에는, 나중에 작성한 속성값의 우선순위가 높기 때문에 이 때 컬러는 blue로 표기가 됨. Hello World // style.css 문서 p { color: red; } p { color: blue; } 2. 디테일 같은 태그라도, 하나는 부모를 명시해줬고, 다른 하나는 그냥 태그라면, header 안의 p가 좀 더 구체적으로 작성된 CSS 선택자이기 때문에 색상은 red로 나타나게 됨. Hello World // style.css 문서 header p { color: red; } p { color: blue; } 3. 선택자 사용하는 선택자에 따라서도..

속성의 상속 & 부모 자식 관계 특정 태그가 다른 태그를 포함하는 관계. 예를 들어, Header h1 Header p 태그 안에 과 가 있으니까, 와 는 부모 자식 관계. 과 는 동급이니까 형제 관계. // style.css 문서 header { color: red; } h1 { color: blue; } p { color: green; } 그래서 에다가 color값을 red로 준거는 부모에다가 red 유전자를 집어넣은 거랑 똑같음. 그 유전자는 부전자전이라고 자식들이 상속 받기 때문에 자식들의 폰트 컬러도 red로 표시가 됨. 근데, 위에서는 그 자식들을 하나하나 직접 선택을 해서 다시 컬러 유전자를 입혔어. 그래서 각각 blue와 green이 되는 것임. Header h1 Header p Foote..

선택자(Selector) HTML의 어떤 요소에 CSS를 적용할 것인지 선택하는 방법. - Type : HTML 태그명을 다이렉트로 입력하고 CSS 적용. // Type Hello World - Class : HTML 태그에 class라고 하는 속성을 태그에 넣어서 별명을 지정하고, CSS에서는 .(점)을 사용해서 클래스 속성값을 입력. // Class Hello World - ID : HTML태그에 id라고 하는 속성을 사용해서 이름을 지정하고, CSS에서는 #(샵)을 사용해서 ID 속성값을 입력. // ID Hello World

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

Block 요소와 Inline 요소 내가 사용하는 태그가 인라인 요소인지, 블럭요소인지 알아야 레이아웃 작업이 원활하게 진행될 수 있음. 두 요소를 구분 짓는 세 가지 주요 특징은 다음과 같음. 줄바꿈 현상이 있는지 가로나 세로로 공간에 대한 크기를 만들 수 있는지 상하 배치작업이 가능한지 Hello devSsom Hello devSsom Hello devSsom Hello devSsom Hello devSSom Hello devSSom 위에처럼 태그를 연달아서 입력할 때, 글자들이 y축 방향으로 정렬되고 있는데, 이와 같은 특징을 가지고 있는게 Block 요소. ~, , , 등 공간을 만들 때 사용했던 태그들이 다 Block 요소임. 이 Block 요소들은 공간을 만들 수 있기 때문에, width, h..