CSS
-
[생활코딩] CSS 코드의 재사용Study/HTML & CSS 2019. 11. 27. 22:24
여러 페이지를 같은 디자인으로 만드려면 CSS 페이지의 태그 내의 코드들을 모두 복사해주면 된다. 하지만 만일 적용해야하는 페이지가 수천개라면 어떨까? 수천번 직접 복사하는건 비효율적이고 이를 간단하게 하기 위해 다음과 같이 태그를 이용한다. 1. style.css 라는 파일을 새로 만들고, 태그 내의 내용들을 전부 복사해 넣는다. 2. html 페이지 내의 태그를 이제 지워버리고, 를 html 내에 삽입한다. 이렇게 코딩에서 중요한 중복의 제거를 통해 훨씬 효율적이고 수정이 파격적으로 쉬운 웹페이지를 만들 수 있다. CSS 수업 초기에 언급했던 '정보로써의 html' 의 가치 또한 퇴색되지 않는다. 캐시(Cache) 한번 페이지를 방문해서 Style.css 파일을 다운받았다면, 다음부터 방문할 때 웹브..
-
[생활코딩] 미디어쿼리Study/HTML & CSS 2019. 11. 27. 17:15
웹 개발자들은 모니터, 스마트폰과 같이 변화하고 발전하는 화면의 형태에 각각 최적화된 웹페이지를 만들고자 한다. 이에 사용되는 기술이 바로 미디어 쿼리이다. 반응형 디자인이란? 화면의 특성에 따라 웹페이지의 각 요소들이 반응해서 동작하도록 구현하는것을 의미하고, CSS에서 반응형 디자인을 구현할때 사용하는 것이 미디어쿼리이다. 미디어 쿼리는 태그 내에 @media( ) 코드를 통해 적용할 수 있다. 예로 화면크기가 800px 보다 작을 경우를 가정하려면 @media(max-width:800), 화면 크기가 800px 보다 클 경우를 가정하려면 @media(min-width:800) 과 같이 ( ) 안에 조건을 입력하는 방식이다. Responsive => 800px 보다 화면 사이즈가 작아지면 div 태그..
-
CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성Study/HTML & CSS 2019. 11. 24. 20:40
[ 가상 클래스 선택자 ] 문서 상에 있는 것들을 지정하는 것이 아닌, 어떤 가상의 상태를 지정하는 것을 의미한다. link : 방문하지 않은 링크를 선택 visited : 방문한 링크를 선택 네이버 a:link { color : black; } // 링크를 방문하지 않은 태그를 검은색으로 지정 a:visited { color : red; } // 링크를 방문한 않은 태그를 빨간색으로 지정 active : 마우스로 클릭한 상태 hover : 마우스를 위에 올린 상태 focus : 포커스를 가진 상태 (ex: input 박스에서 텍스트 입력 가능한 상태) Hello world Contents here h1:active { color: yellow; } div:hover { color: red; } inpu..
-
[코드스테이츠 TIL] CSS 선택자 : CLASS, IDStudy/HTML & CSS 2019. 11. 22. 21:53
[ CSS ] Cascading Style Sheets의 약자 웹 페이지 구성요소의 스타일을 정의하는 언어 CSS를 HTML에 적용하는 세가지 방법 1. inline HTML의 특정 태그에 직접 style을 적용 Hello world 2. HTML 내부에 stylesheet 작성 태그 이용하여 Hello world Contents here Here too! 3. HTML 외부에 stylesheet 작성 태그 이용 css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입 Hello world Contents here Here too! [ CSS SELECTOR ] CSS 선택자 : CSS에서 요소(element)를 선택하는 규칙 1. 각각의 ELEMENT에 고유한 ID를 부여 : #I..
-
[생활코딩] 5. CSS 선택자 & 선택자 우선순위Study/HTML & CSS 2019. 8. 7. 10:00
CSS 선택자 CSS에서 선택자는 디자인 스타일을 적용하고자 하는 HTML의 요소를 선택할 때 사용된다. CSS 선택자는 다양한 종류가 있는데, 어떠한 요소를 선택할 지 세밀하게 조절할 수 있다. 그리고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다는 특징이 있다. .saw { color:gray; } 1. class 선택자 ▶ .값 { } '그룹핑하다'라는 의미로 사용되는데, 광범위하게 처리하고 싶을 때 사용된다. 클래스 선택자는 비유하자면 고등학교의 특정한 반에 해당한다. 그리고 클래스 선택자에는 여러 개의 속성을 넣을 수 있다. ★동일한 선택자를 함께 기재했다면, 마지막에 기재한 선택자가 우선 순위이다. 따라서 위 사진을 보면, 2.html 링크 태그에서 saw와 activ..