프로그래밍 언어/CSS
-
CSS 기초 - 3 | CSS 의 간단한 속성들프로그래밍 언어/CSS 2020. 5. 25. 19:05
CSS 에서 자주 쓰이는 속성들 CSS 에는 너무나도 많은 속성들이 있다. 정말 너무 많아서 나도 다 알지 못한다. 자주 쓰지 않는 새로운 속성이 필요할 때는 그냥 검색해서 찾아본다. 다만, 정말 자주 쓰이는 속성들은 외워두는게 좋다. 사실 외운다기보다는 많이 쓰다 보니 익숙해진 느낌이다. 따로 외우려고 노력한 적은 한 번도 없다. 그럼 정말 간단한 것 부터 하나씩 배워보자. 그전에 가볍게 HTML 세팅만 하고 넘어가자. Practice Text 이 상태의 HTML 에서 CSS 를 연습해 보겠다. color 속성 h1 { color: red; } 이전 글에서 예시를 들면서 정말 많이 사용했던 속성이다. 말 그대로 color 즉 색을 바꿔주는 속성이다. 여기서 색이라 함은 글자색을 뜻한다. 위와 같이 CS..
-
CSS 기초 - 2 | CSS 의 기본구조와 선택자프로그래밍 언어/CSS 2020. 5. 25. 14:14
CSS 의 기본구조 이제 CSS 파일을 작성하는 방법에 대해 알아보자. CSS 파일은 HTML 파일에 연결되어 HTML 태그를 각각 꾸며주는 역할을 한다. 그렇기에 HTML 파일 안에서 어떤 태그를 꾸며줄 것인지, 또 어떻게 꾸며줄 것인지를 명시해야 한다. 선택자 { 속성: 값; } 위의 구조가 CSS 의 가장 기본적인 형태라 볼 수 있다. 선택자 : HTML 파일에서 어떤 태그를 선택할 것인지를 명시한다. 속성 : 어떠한 속성을 꾸며줄지 명시한다. 값 : 해당 속성을 어떻게 꾸며줄지 명시한다. 만약에 HTML 의 p 태그의 글자색을 빨갛게 바꾸고 싶으면 어떻게 할까? p { color: red; } 이게 끝이다. 간단하지 않은가? 여기서 '좀 더 복잡한 선택자를 다루는 방법' , '여러 가지 속성과 그..
-
CSS 기초 - 1 | CSS 란?프로그래밍 언어/CSS 2020. 5. 25. 13:22
CSS 란? 드디어 HTML 기초를 끝내고 CSS 기초 파트로 넘어왔다. 우선 CSS 가 뭔지는 알고 시작하자. CSS (Cascading Style Sheets) HTML 을 이용해 웹 페이지의 뼈대를 만들었다면, CSS 는 그 뼈대를 꾸며주는 역할을 한다. CSS 역시 HTML 과 마찬가지로 프로그래밍 언어 라고는 할 수 없다. 또한 HTML 뼈대를 꾸며주는 스타일 역할을 하기 때문에 HTML 파일 없이는 아무런 역할도 하지 못한다. HTML 에 CSS 적용시키기 HTML 에 CSS 스타일을 적용시키는 방법은 크게 3가지가 있다. 각각의 방법을 하나씩 살펴보자. 1. 인라인 방식 Hello! HTML 태그에 style 속성 을 추가해 해당 태그에 스타일을 적용시키는 방법. 2. 내부 스타일 시트 He..