본문 바로가기
반응형

전체 글172

CSS 글자 스타일 적용 이번 시간에는 글자 스타일을 적용하는 방법에 대해 다뤄볼 것이다. 글자에는 기울기, 폰트, 글자선, 그림자 등 다양한 스타일을 적용할 수 있다. 이러한 글자의 스타일들은 기본적으로 font와 text 속성을 이용하여 적용할 수 있다. 둘 다 같은 글자를 의미하는데 어떤 때는 font 속성을 어떤 때는 text 속성을 써야 하는 걸까? font 속성과 text 속성의 차이 font 속성은 글자의 디자인적 요소를 적용하는 것이고, text 속성은 글자의 배치와 효과를 적용하는 것이다. 차이만 봐서는 이해하기 어려우니 예제를 들면서 설명하도록 하겠다. 그럼 지금부터 글자 스타일 적용하는 방법 시작!!~ 1. font 스타일 : 글자의 글꼴, 기울기, 굵기 등 디자인적 요소를 변경하는 속성이다. (1) font.. 2023. 12. 26.
CSS 색상 변경 방법 지금까지 CSS 예시를 들면서 가장 많이 속성 값에 대해 다뤄보았다. CSS에서 색상을 변경하려면 아래와 같이 코드를 해야 한다. 요소 { color : 속성값; } 이전까지는 color 속성 값에 대해 빨간색이면 red , 파란색이면 blue 이렇게 키워드를 입력해서 color 속성값을 적용해 왔다. 앞으로는 오늘 다룰 내용인 CSS 색상 변경 방법을 배운다면 다양한 color를 적기에 쓸 수 있을 것이다.!! 그럼 CSS 색상 변경 방법 스타트! CSS color 속성값을 적용하는 방법에는 4가지가 있다. 흔히 아는 색상 이름부터 hex, rgb, hsla가 있다. 그러면 우리가 잘 알고 있는 색상 이름(키워드)부터 시작하겠다. 공통 HTML 코드 색상을 적용하는 방법 4가지 1. 색상 키워드(이름).. 2023. 12. 23.
CSS 문법 Pesudo-class(가상클래스) 이어서 오늘은 가상클래스, 의사클래스에 대해 배워보겠다. (Pesudo class = 가상클래스 = 의사클래스) 가상클래스란? 요소의 특수 상태를 정의하는 데 사용된다. 예를 들어서 마우스를 특정 부분으로 위치 시켰을 때 색이 변경 방문한 링크와 방문하지 않은 링크의 스타일을 다르게 지정 등 이런 특별한 상황에서 쓰인다. 동적 가상 클래스, 상태 가상 클래스, 구조 가상 클래스 등 가상 클래스의 종류는 다양하지만 종류별로 외워서 사용할 필요가 없으므로 자주 쓰이는 가상 클래스에 대해서만 알아도 충분하다. 공통 HTML 코드 Pesudo-class(가상클래스, 의사클래스) (클릭하세요)가상 클래스 연습중입니다. 안유진 장원영 가을 레이 박명수 리즈 이서 1. link 관련 가상 클래스 선택자 (1) lin.. 2023. 12. 22.
CSS문법 Combinators(결합자, 선택자) 결합자(Combinators)란? 선택자들의 간의 관계를 설정해주는 것이다. 관계를 설정해준다..? 라는 말이 조금은 이해가 되지 않는다. 쉽게 말하면 연관관계가 있는 예를 들면 부모자식 간의 관계를 어떤 결합자(부호)를 써서 설명한다는 것!! 결합자는 4가지가 있다. (사실 세부적으로 나뉘면 더 나눌 수 있고 줄이면 줄일 수 있지만 나는 w3school 기준으로 4개로 설명하겠다ㅇㅅㅇ) (공통) HTML 코드 combinators | 결합자 | 조합자 아이브 뉴진스 엔믹스 에스파 카리나 윈터 닝닝 지젤 1. Descendant Selector ( 하위 선택자 | 자손 선택자 | 자손 결합자) : 해당 요소의 하위 요소 중에서 특정 요소를 모두 선택하는 것이다. 상위 하위 { 속성 : 속성값; } 으로 .. 2023. 12. 22.
반응형

티스토리툴바