JuinThyme

CSS 포지셔닝이란? 브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할 지를 결정하는 것이 float 속성과 position 속성이다. 박스 모델의 패딩이나 마진, 테두리 속성까지 포함해 전체적인 레이아웃이 완성된다. 그리고 같은 내용이더라도 어떻게 배치를 하고 어떤 배경과 색상을 사용할 지에 따라 다른 레이아웃으로 만든다. box-sizing 속성 - 박스 너비 기준 정하기 여러 요소를 배치하려면 각 요소의 너비를 계산해야 한다. CSS의 width 속성은 콘텐츠 영역의 너비를 나타낸다. 해당 요소에 적용한 패딩이나 테두리 크기는 따로 계산해서 배치해야 한다. box-sizing: content-box | border-box 속성 content-box : width 속성 값을 콘텐츠 영역 너비 값으로..

IT/HTML 및 CSS 2021. 5. 1. 12:22

서론 SI 기업을 다니면 정해진 일정에 쫓겨서 개발을 한다. 마감 기한까지 맞추기 위해 기능은 돌아간다. 이 프로그램이나 웹 사이트가 지속적으로 운영이 된다. 지속적으로 운영이 되면 유지 보수를 필수적으로 해야 한다. 프로그램이나 웹 사이트는 만들고 나서 끝이 아니라 사용자가 필요로 하는 기능이나 운영되면서 에러가 나는 부분을 추가 및 수정해야 하는 경우가 온다. 그때 기능만 돌아가던 부분을 수정한다. 운영되고 있는 시스템의 소스 코드가 기능만 돌아가고, 복잡한 코드라고 가정을 해보자. 복잡한 소스 코드가 눈 앞에 있다. 그러면 이 소스 코드를 해석을 하고, 어떤 기능이 관련되어 있는지 파악해야 한다. 파악하는데 시간이 오래 걸리면 필요한 기능 개발하는데 있어서 시간이 많이 소비된다. 그러면 이 소스 코..

주저리 2021. 4. 29. 12:07

margin 속성 - 요소 주변 여백 설정하기 마진(margin)은 현재 요소 주변의 여백이다. 따라서 마진을 이용하면 한 요소와 다른 요소 사이의 간격을 조절할 수 있다. margin-top: | | auto margin-right: | | auto margin-bottom: | | auto margin-left: | | auto margin: | | auto 속성 : 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위로 함께 수치로 지정한다. : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정한다. auto : display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정한다. 실행 화면 마진 중첩(margin overlap) 현상 박스 모델의 마진 속성을 ..

IT/HTML 및 CSS 2021. 4. 28. 19:00

border-style 속성 - 테두리 스타일 지정하기 테두리 스타일은 기본적으로 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다. border-style: none | hidden | dashed | dotted | double | groove | inset | outest | ridge | solid 속성 none : 테두리가 나타나지 않는다. 기본 값이다. hidden : 테두리가 나타나지 않는다. dashed : 테두리르 짧은 선(점선)으로 표시한다. dotted : 테두리를 점선으로 표시된다. double : 테두리를 이중선으로 표시한다. groove : 테두리를 창에 조각한 것처럼 표시한다. solid : 테두리를 실선으로 표시한다..

IT/HTML 및 CSS 2021. 4. 27. 12:33

블록 레벨 요소와 인라인 레벨 요소 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다. 인라인 레벨(Inline-level) : 줄을 차지하지 않는 요소다. 종류 블록 레벨 태그 : , ~, , , , , , , , , 인라인 레벨 태그 : , , , , , , , , , 박스 모델(box model) - 박스 형태의 콘텐츠 태그를 사용하는 텍스트 단락을 블록 레벨 요소인데 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가진다. 이런 박스 형태를 스타일 요소에서는 '박스 모델(box model) 요소'라고 한다. 박스 모델을 잘 알아야 한 줄에 배치할 지, 줄을 바꾸어 배치할 지, 요소와 요소 사이의 간격을 어떻게 조절할 지 결정할 수..

IT/HTML 및 CSS 2021. 4. 26. 18:43

background-color 속성 - 배경 색 지정하기 배경 색을 지정하려면 배경을 넣고 싶은 요소에 속성을 background-color 속성을 넣으면 된다. background-color: background-color: #00ff00; /* 16진수 표현 */ background-color: rgb(0, 255, 0); /* rgb 표현 */ background-color: green; /* 색상이름 */ 배경 색 스타일과 상속 태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용된다. 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르..

IT/HTML 및 CSS 2021. 4. 24. 14:03

list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기 목록 형태에서 스타일을 지정할 수 있다. 순서가 없는 목록인 경우 목록 앞에 다양한 불릿을 넣을 수 있다. 순서 없는 목록에서 불릿 모양 바꾸기 disc (●) : 채운 원 circle (○) : 빈 원 square (■) : 채운 사각형 none : 불릿 없애기 사과 바나나 파인애플 사과 바나나 파인애플 순서 목록에서 숫자 바꾸기 decimal : 1, 2, 3... decimal-leading-zero : 01, 02, 03,,,, lower-roman : i, ii, ii,,, upper-roman: I, II, III,,, lower-alpha 또는 lower-latin : a, b, ,c,,,, upper-alpha 또는 ..

IT/HTML 및 CSS 2021. 4. 23. 12:21

line-height 속성 - 줄 간격 조절하기 문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격'이 생긴다. 그런데 줄 간격은 너무 좁으면 내용이 눈에 잘 들어오지 않는다. 이때 line-height 속성을 이용해서 줄 간격을 조절할 수 있다. line-height: normal | | | | inherit 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 text-overflow 속성 - 넘치는 텍스트 표시하기 너무 긴 글인 경우 요약해서 많이 문장만 보여주고, 나머지의 경우는 말 줄임표로 생략되었지만 마우스를 텍스트 위에 올리면 줄여진 텍스트를 다 보여줄 ..

IT/HTML 및 CSS 2021. 4. 21. 18:40