'CSS' 태그의 글 목록

CSS (8)

[HTML&CSS] column 속성으로 다단으로 편집 (multi-layout edit)

Language & Solution/HTML&CSS 새로비 2019. 10. 22. 18:23

column 속성으로 다단으로 편집 텍스트 단을 column 속성으로 다단으로 편집할 수 있습니다. 다단으로 편집한다는 의미는 어떤 레이아웃을 여러 개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. 보통 다단으로 편집하려면 table 요소를 사용하여 구성하기도 하지만 css의 column 속성으로 간편하게 구현할 수 있습니다. column-width column-width를 통해 column으로 표현되는 단의 너비를 고정해 놓고 구성할 수 있습니다. column 즉, 단을 고정시켜 놓았을 경우 화면이 커지면 단의 개수가 많아질 것이고 화면이 작아지면 단의 개수가 줄어드는 원리입니다. column-width: | auto 단 너비를 직접 지정할 수 있습니다. auto 단의 개수 같은 다른 속성에 따라 단 ..

[HTML&CSS] position 속성 정리하기!

Language & Solution/HTML&CSS 새로비 2019. 10. 10. 14:18

*아래를 누르시면 HTML, CSS 코드 실행환경을 만드실 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 position 속성 position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을 지를 결정할 수 있죠. 티스토리를 하다보면 css를 수정해야하는 일이 잦습니다. 만약 position 속성에 대한 이해없이 css를 수정한다면 예상치도 못하게 블로그 레이아웃이 이상해지거나 망가질 수 있습니다( Wordpress나 서비스 UI, 프론트엔드쪽 만질 때도 마찬가지!). 딴 건 몰라도 화면단과 관련된..

[HTML&CSS] box-sizing, float, clear

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 17:55

| box-sizing box-sizing 속성은 width의 크기를 어떤 기준으로 할 것인지를 정하는 속성입니다. 박스 모델에서 width의 값을 토대로 콘텐츠 영역의 크기를 결정하는 것이죠. 처음 감을 잘 못잡을 수도 있지만 천천히 포스팅을 따라오다보면 쉽게 이해할 것입니다! box-sizing에서 사용할 수있는 값은 다음과 같습니다. box-sizing : content-box | border-box content-box width 속성값을 콘텐츠 영역 너비 값으로 사용합니다. (기본값) border-box width 속성값을 콘텐츠 영역 및 테두리(border)까지 포함한 박스 모델 전체 너비 값으로 사용합니다. 참고로 content-box보다는 border-box가 width를 통해 콘텐츠 영역..

[HTML&CSS] 마진(margin) 속성, 패딩(padding) 속성

Language & Solution/HTML&CSS 새로비 2019. 10. 8. 16:50

*아래 링크를 누르시면 HTML, CSS 코드 실행환경을 만들 수 있습니다.[Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 마진(margin) 마진(margin)은 요소 주변 여백을 뜻합니다. 마진의 크기를 조절함으로서 다른 요소 사이에 간격을 남겨 유저 친화적인 UI를 구사할 수 있죠. 마진 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있습니다. 이름에서 알 수 있듯 위, 오른쪽, 아래쪽, 왼쪽 여백들을 가리키는 속성들이며 이를 한 번에 표기할 수 있는 margin이란 속성도 있습니다. 사용법은 다음과 같습니다. margin : | | auto margin-top ..

[HTML&CSS] 콘텐츠(content) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 21:38

| 콘텐츠 영역 콘텐츠 영역(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로 텍스트, 이미지, 비디오 등 실제 내용을 포함하는 부분입니다. 콘텐츠 영역의 크기는 콘텐츠 너비 및 콘텐츠 높이로 결정되며 width와 height 속성으로 설정할 수 있습니다. width: | | autoheight: | | auto : px이나 cm 같은 단위로 지정합니다. : 박스모델을 포함하는 부모 요소 기준으로 너비나 높이값을 백분율로 지정합니다. (부모가 없을 때는 viewport 기준)auto : 박스모델의 크기가 콘텐츠 양에 따라 자동으로 결정됩니다. (기본값) 참고로 CSS 박스 모델의 width 속성은 콘텐츠 영역의 너비를 말합니다. 이때 콘텐츠 영역를 계산하는 방식은 어떤 bo..

[HTML&CSS] 테두리(border) 영역

Language & Solution/HTML&CSS 새로비 2019. 10. 7. 15:13

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 테두리(border) 영역 박스 모델(box model)에서 테두리는 텍스트 단락 뿐만 아니라 그림이나 표, 양식 등 사각 형태를 가진 어떤 요소에나 적용할 수 있습니다. 테두리와 관련된 속성에는 테두리 두께, 테두리 스타일, 테두리 색상 등이 있습니다. | border-style : 테두리 스타일 border-style은 테두리의 스타일을 정하는 속성으로 쓰이며 다음과 같은 값을 지정할 수 있습니다. none 테두리가 나타나지 않습니다. (기본값) hidden 테두리가 나..

[HTML&CSS] CSS 스타일 우선순위

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 18:22

| CSS 스타일 우선순위 (CSS Style Precedence) CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻입니다. 이러한 방식으로 CSS는 중복되는 스타일 규칙을 '위에서 아래로' 적용되며 방지하는 방법을 채택하고 있습니다. 즉 스타일에 우선순위를 두어서 HTML의 요소가 어떤 CSS 스타일에 영향을 받을 지 결정하는 것이죠. 스타일의 우선순위는 다음과 같이 먼저 사용자와 제작자 그리고 중요 스타일인지 일반 스타일인지에 따라서 결정됩니다. (1이 가장 중요한 순서, 5가 가장 낮음) 1. 사용자 스타일 시트, 중요 2. 제작자 스타일 시트, 중요 3. 제작자 스타일 시트, 일반 4. 사용자 스타일 시트 일반 5. 브라우저 스타일 시트 여기서 사용..

[HTML&CSS] 블록 레벨, 인라인 레벨 요소 (Block Level Element, Inline Level Element)

Language & Solution/HTML&CSS 새로비 2019. 10. 2. 16:24

*현 포스팅의 HTML 코드의 실행환경을 만들고 싶으신 분들은 아래 포스팅을 참고하시면 좋을 것 같습니다. [Language & Solution/Node.js] - npm과 lite-server로 HTML, CSS 실습관경 만들기 | 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진..

1

Sidebar

Copyright © 새로비 All Rights Reserved

Designed by JB FACTORY

티스토리툴바