본문 바로가기

분류 전체보기393

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.
[2025-03-14] TIL을 1년 쓰고 느낀 점 TIL이란?TIL이란 Today I Learned의 약자이다. 즉 오늘 내가 배운 것 기록해둔 자료를 의미한다.작년 이맘때 쯤 서른이 넘은 나이에 부트캠프에 처음 들어가면서, 뭔가 새로운 길이 열릴 것 같다는 기대감에 부풀었고, 평소에도 이것저것 메모하고 학습하는 것을 좋아하는 성격이었기 때문에 부트캠프에서 처음으로 소개받은 TIL 작성에 대해서 들었을 때는 충격 그 자체였다.나는 군 복무 시절부터 일기를 꾸준히 작성해왔지만 내 일기의 목적은 그 날의 생각정리, 훗날 다시 읽었을 때 내 생각의 변화를 알 수 있고 추억 속에서 휘발되기엔 아까운 나라는 사람의 인생을 기록하고 싶었기 때문이다.내가 살면서 공부했던 게 이것 뿐이겠는가? 군대에 가면 총 쏘는 방법을 알아야 하고, 경계 근무 요령에 대해서도 배워.. Programing/TIL 2025. 3. 14.

티스토리툴바