전체 글
-
2단 레이아웃프로그래밍/HTML&CSS 2022. 9. 12. 21:43
사이트의 제목, 본문, 사이드바, 밑에 푸터부분으로 구분지어 2단 레이아웃을 구성한다. 예시와 같이 이런 식으로 구현하면 제법 웹 사이트의 모양으로 만들 수 있다. 먼저 HTML 부문을 작성해보자 사이트 제목 본문 Lorem ipsum dolor sit amet consectetur ... 사이드바 Lorem ipsum dolor sit amet consectetur ... 푸터 Lorem, ipsum dolor sit amet consectetur ... 그다음 CSS 부분을 생각하보면 contents와 sidebar에 float를 각각 좌, 우를 주면 양옆으로 붙여준다. 이때, 두 박스의 크기로 인해 겹치는 것을 방지하고자 전체 박스인 container의 width 값을 고려하여 contents와 s..
-
position프로그래밍/HTML&CSS 2022. 9. 10. 16:36
position 속성은 웹 문서 내에서 요소들의 위치를 결정하는 방식을 설정하는 속성으로 속성을 잘 사용하면 원하는 지점에 요소의 위치를 배치하는 것이 가능해진다. left, right, top, bottom 속성은 position 속성으로 기준위치를 정하면 기준 위치로부터 얼마나 떨어질 것인지 지정하는 속성이다. 속성 값으로 떨어져있는 정도를 표기하며 보통 px 단위를 사용한다. 종류 설명 left 기준 위치에서부터 요소를 왼쪽으로 얼마나 떨어뜨릴 값 지정 right 기준 위치에서부터 요소를 오른쪽으로 얼마나 떨어뜨릴 값 지정 top 기준 위치에서부터 요소를 위쪽으로 얼마나 떨어뜨릴 값 지정 bottom 기준 위치에서부터 요소를 아래쪽으로 얼마나 떨어뜨릴 값 지정 position 속성 값의 종류는 4가..
-
float프로그래밍/HTML&CSS 2022. 9. 9. 20:14
float 속성은 HTML 요소를 수평으로 정렬하고자 할 때 사용하는 방법으로 다른 요소들과 자연스럽게 어울리도록 만들어준다. float를 적용받은 요소들은 right, left 방향을 결정하게 되고 속성값을 적용받으면 float를 적용 받은 요소의 다음 요소들은 끌어 올려지게 된다. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, in mollitia. Itaque placeat quod beatae blanditiis recusandae, labore fugiat ratione, eligendi cumque quasi eveniet doloribus dicta nesciunt corrupti velit. Deleniti!..
-
디스플레이(display)프로그래밍/HTML&CSS 2022. 9. 8. 16:24
display 속성은 웹 페이지의 레이아웃과 요소를 어떻게 보여줄지를 결정하는 속성으로 display 속성을 사용하면 블록 속성 요소와 인라인 속성 요소를 변경하는데 사용한다. 종류 설명 block 언제나 새로운 라인에서 시작하고 해당 라인의 모든 라인을 차지함. inline 새로운 라인에서 시작하지 않고 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지함. inline-block 인라인 속성과 블록 속성을 모두 가지고 있으며 너비 높이 패딩 마진을 지정할 수 있음. none 웹 페이지에서 해당 요소를 표시하지 않고 레이아웃에서 사라짐. 위 결과를 보면 inline을 적용한 div 내 이미지들은 각 이미지 마다 라인을 차지하지않고 img 요소 만큼만 차지하여 좌우로 나열한 반면, block을 적용한..
-
박스 사이징(box-sizing)프로그래밍/HTML&CSS 2022. 9. 7. 07:41
CSS 박스모델의 기본은 width와 height 값은 padding 이나 border 영역을 포함 하지않는다. 웹 문서에 여러 요소를 배치할때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 padding, border 두께까지 고려해야한다. CSS3부터는 box-sizing 속성이 추가되었고 이를 통해 방식을 바꿀 수 있다. box-sizing의 속성값으로 border-box를 주어지게되면 padding와 border영역도 width와 height 영역에 포함시킬 수 있게되었다. 종류 설명 border-box 테두리까지 포함해서 너비값을 지정 content-box 컨텐츠 영역만 너비값을 지정, 기본값 box-sizing='content-box' box-sizing='content-box' 즉 c..
-
마진(margin)프로그래밍/HTML&CSS 2022. 9. 6. 07:42
마진이란 요소 주변의 여백을 의미한다. 마진을 이용하면 요소와 요소 사이의 간격을 조절 할 수 있고, 마진도 패딩과 마찬가지로 상하좌우 4 방향의 마진을 한꺼번에 지정할 수 있고, 속성 뒤 특정 방향과 함께하여 표기가 가능하다. margin-top:상 margin-right:우 margin-bottom:하 margin-left:좌 margin:상 우 하 좌 모든 방향 설정 마진의 특징적인 부분으로는 좌우로 배치된 요소간에는 각 좌우 마진이 겹치지 않으나 상하로 배치된 요소간에는 마진이 겹쳐지는 현상이 있다. 마진 좌우 속성값으로 auto를 주게된다면 요소가 웹 문서에서 가운데 정렬이 되는 것을 확인 할 수 있다.
-
패딩(padding)프로그래밍/HTML&CSS 2022. 9. 5. 20:18
패딩이란 콘텐츠와 테두리 사이의 여백을 설정하는 속성이다. 상하좌우 4 방향의 패딩을 한꺼번에 지정할 수 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어로 top, right, bottom, left를 사용해서 특정 방향에만 지정하여 패딩을 적용할 수 있다. padding-top:상 padding-right:우 padding-bottom:하 padding-left:좌 padding:상 우 하 좌 모든 방향 설정 패딩 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet eum, quasi, delectus mollitia ab totam enim eaque quaerat quos odio id consectetur te..