본문 바로가기

Programing/CSS39

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.
CSS란? CSS란?Cascading Style Sheets의 약자웹 페이지의 디자인과 레이아웃을 담당HTML이 웹 페이지의 구조를 결정한다면 CSS는 그렇게 정해진 구조에 스타일(색상, 폰트 크기, 여백, 정렬 등)을 적용하는 역할등장배경원시 웹 페이지는 HTML 하나로만 구성되었다.이것들도 나름의 스타일을 적용하기 위해 아래와 같이 인라인으로 스타일을 지정했다.안녕하세요!제목입니다문제는 이러한 방식은 웹 페이지가 복잡해지면 코드가 너무 복잡해진다는 단점이 있었음.메인 컨텐츠와 디자인이 뒤섞여 있다 보니 유지보수에도 어려움이 있었음.또한 웹 브라우저를 볼 수 있는 다양한 기기가 등장함에 따라 크로스 브라우징이 필요했는데 위 방식으로는 불가능했음.그러다 CSS는 1996년 W3C (World Wide Web Con.. Programing/CSS 2025. 3. 4.
Tailwind :: hover 애니메이션 : 위로 살짝 올라가기 trnasition-tranform : 호버와 같은 변환 속성에 대해 트랜지션을 적용duration-400 : 지속 시간을 400ms(0.4s)로 설정hover:-translate-y-2 : 호버 시 요소를 0.5ream (8px) 만큼 위로 이동시킴. translate 앞에 - 붙어 있으면 위로, 양수면 아래로. Programing/CSS 2024. 6. 30.

티스토리툴바