본문 바로가기

CSS5

[CSS 단위] 아직도 헷갈린다면 이제는 확실히 알아두자. 0. CSS 단위 : length 자료형 CSS 단위는 CSS에서 사용되는 값들의 길이나 크기를 나타내기 위한 단위이다. 오늘은 CSS의 단위들 중, length 자료형에 속하는 단위들을 알아보겠다. length는 폰트 사이즈뿐만 아니라 width나 height와 같이 길이값을 나타내는 자료형이다. CSS에서는 길이값을 나타내기 위해서 px, rem, em등과 같은 다양한 단위들이 있는데 그 단위들은 크게 절대 길이 단위와 상대길이 단위로 나뉘게 된다. 절대 길이 단위는 px, inch, pt와 같이 고정된 크기를 가지는 단위고, 상대길이 단위는 em, rem, lh, vw, vh와 같이 특성 요소의 크기나 뷰포트의 크기의 상대적인 크기를 나타낼 수 있는 단위다. 상대적인 크기를 가지기 때문에 반응형 디.. 2023. 8. 27.
[CSS 우선순위] 부트스트랩을 사용했는데 왜 스타일 적용이 안되지? 🛠️ 구현할 화면 빨강색으로 표시한 부분을 구현하고자 했다. 처음에는 일일이 만들기 번거로워서 부트스트랩 이라는 프레임워크를 활용했고, 그 중 Card 라는 컴포넌트를 사용했다. 이를 그대로 사용하지는 않고, 아래와 같이 커스텀을 했다. 🧐 잘못 쓴 코드 예시 그런데 코드를 쓰다보니 아래와 같은 두 가지 문제가 있었다. 1. 막상 만들고 보니, 카드의 형태가 아니기에 커스텀을 넘어서 그냥 내가 직접 만든 꼴이 되어 버린 것 2. 부트스트랩 클래스에 이미 적용된 스타일때문에 내가 커스텀한 스타일이 묻히는 것 최저가 /* CSS 파일 */ .card { border: none !important; display: flex !important; justify-content: space-between !impo.. 2023. 8. 24.
CSS box model에 대해서 설명해 주세요. 👩🏻‍💻 CSS box model에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , HTML 요소는 박스 영역의 형태로 되어 있는데, 이를 디자인적으로 표현하기 위해 box model 이라는 명칭을 붙여 놓은 것입니다. 이 박스는 content, padding, border, margin 총 4가지 요소로 구성됩니다. Content 요소의 텍스트나 이미지 등 HTML 태그 사이에 담긴 내용이 표현되는 영역입니다. width, height 프로퍼티를 갖습니다. Padding 테두리 안쪽에 위치하는 요소의 '내부 여백' 영역이며, border와 content 사이에 위치합니다. 기본적으로 투명색입니다. Border 테두리 영역으로, 박스의 경계를 표시하는 역할을 합니다. Margin 테두리 바깥에 위치하는 .. 2023. 3. 13.
일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? 👩🏻‍💻 일반적으로 CSS를 불러오기 위해 요소를 💁🏻‍♀️ 요약하자면 , CSS 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, 요소가 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다. CSS 일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 .. 2023. 3. 12.
HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27.