본문 바로가기

Programing/CSS41

CSS의 Box Model (Padding, Margin, Border) Box Model이란?CSS는 모두 박스 형태로 이루어져있다. 이것을 CSS의 Box Model 이라고 한다. 이해하기 전에 아래의 그림을 먼저 보겠다. 개발자 도구에서 볼 수 있는 그림이다.Content: 우리가 실제로 눈으로 보는 내용물 (사진에서는 파란색 박스)Padding: 내용물을 감싸고 있는 여백 영역 (안 쪽 여백)Border: 내용물을 감싸고 있는 최종적인 외곽선Margin: 내용물을 감싸고 있는 외곽선 밖의 여백 영역 (바깥 쪽 여백)Box Model의 CSS 속성Content내용물이 어떤 것인지에 따라 다르다. 내용물이 글자라면 글자와 관련된 꾸밈 효과를 설정할 수도 있고 이미지라면 이미지와 관련된 꾸밈 효과를 설정할 수 있다.그러나 기본적으로 박스 모델 자체는 아래와 같이 설정하는 경.. Programing/CSS 2025. 5. 12.
CSS 속성 : 폰트의 기본 속성 서론CSS에서는 여러가지 스타일을 지정할 수 있다. 그 중에서 이번 포스트에서는 가장 기본이 되는 서체를 스타일링 할 수 있는 속성 중 가장 많이 사용되는 속성에 대해서 알아볼 것이다.CSS 폰트의 기본 속성폰트 종류 지정font-family: 'Noto Sans', Arial, sans-serif;font-family는 문서 또는 요소의 폰트를 지정하는 것이다.속성 값 개수 : 속성 값에는 개수 제한이 없지만 보통 3개, 많아야 5개 정도로 지정한다.너무 많이 적으면 성능에서 불리하기 때문에 3~5개 선에서 마무리하는 것이 일반적이다.속성 값 의미 : 첫번째 값부터 차례대로 폰트 적용을 시도한다. 사용자의 PC나 웹에 해당하는 폰트가 없으면 2순위, 3순위 폰트로 적용을 시도한다.속성 값 적용 방법첫번.. Programing/CSS 2025. 5. 12.
CSS 선택자 (Selector) CSS 선택자(Selector)란?CSS를 정의하다 보면 HTML의 특정 요소를 정확하게 선택해야 하는 일이 많이 생긴다.그렇지 않으면 의도하지 않은 대로 스타일이 적용될 수 있기 때문이다. 물론 in-line 방식으로 요소마다 전부 태그 안에 style 속성을 주어 하나하나 스타일을 적용해주면 CSS를 선택해 줄 필요는 없겠지만, 문서가 긴 경우에는 매번 그렇게 하기 어렵고, 스타일이 중복되는 경우에 재활용하는 측면에서도 비효율적이기에 CSS를 위해서 HTML 요소마다 특정한 선택자를 부여해줄 수 있다.CSS 선택자의 종류태그(tag) 선택자말 그대로 요소 자체를 이야기 하는 것이다. 즉 div 태그면 div 태그, span 태그면 span 태그 자체를 전부 통 틀어서 선택하겠다는 의미이다.사용 방법은.. Programing/CSS 2025. 4. 9.
CSS을 적용하는 방법 3가지 CSS 적용 방식 3가지CSS를 적용하는 방법, 즉 작성하는 방법은 크게 세 가지가 있다. 그런데 실무에서는 태그로 연결하는 방식 단 하나만 주로 사용하고 나머지는 거의 사용하지 않기 때문에 알고만 있으면 돼서 이번 포스트는 가볍다.in-line 작성 방식HTML 문서 내에 직접적으로 CSS를 정의하는 방법이다.인라인 방식위 예제를 보면 style 속성을 사용하여 CSS의 key:value를 직접적으로 적은 것을 볼 수 있다.이렇게 적게되면 CSS의 여러가지 적용방식 중 겹치는 부분이 있다면, 예를 들어서 인라인 작성 방식에서는 위 div의 배경색을 red로 했는데, 별도 .css 파일의 클래스 지정, 아이디 지정 등으로 다른 컬러로 또 중복해서 적어놨다면 인라인으로 작성한 CSS가 HTML 문서에 직.. Programing/CSS 2025. 4. 8.
CSS의 구성 요소 (Selectors, Property, value)와 우선순위 총 정리 CSS 학습의 중요성CSS를 학습하는 데 있어서 가장 중요한 것은 직접 타이핑 해보는 것이다.퍼블리셔가 아니라 프론트엔드 과정을 희망하고 학습을 시작했다면, 이것 말고도 배워야 할 게 산더미이고 그 중에서 자바스크립트와 알고리즘, API 통신의 벽을 만나는 순간 사실 화면을 그리는 CSS의 중요도는 떨어질 수밖에 없다.뒤로 갈수록 학습량이 현저히 줄어들기 때문에 처음에 HTML과 CSS를 배우는 단계에서 명확히 이해하고 넘어가는 것이 좋다. 본인도 이미 부트캠프 전과정을 수료했고 눈에 띄는 결과물도 만들어냈지만 결국 다시 처음부터 학습하는 이유는 기본기가 부족하다고 느껴졌기 때문이다.이후에 bootstrap, NextUI, TailwindCSS 등 다양한 라이브러리를 만나게 되면서 실제로 내가 하나하나 .. Programing/CSS 2025. 3. 10.

티스토리툴바