📝 성장을 위한 기록
-
[생활코딩] 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 GridStudy/HTML & CSS 2019. 11. 26. 21:28
무색무취의 아무 의미도 없는 디자인용 태그 block level element css / javascript를 통해서 어떤 정보를 제어하고 싶을 때 그것을 감싸주는 역할을 하는 디자인용 태그 무색무취의 아무 의미도 없는 디자인용 태그 inline level element Grid는 HTML의 디자인을 담당하는 CSS의 기술 중 최신 기술에 속한다. CSS 속성을 적용시키기 위해서는 '태그'가 반드시 필요한데, 또는 와 같은 태그들은 의미를 가지고 있으므로 남용하면 정보가 꼬일 수가 있다. 따라서 이럴 때 사용하는 태그가 바로 와 태그이다. 이 둘은 아무 의미가 없는 태그이기 때문에 디자인에 자유롭게 사용할 수 있다. Grid를 사용하기 전 선행조건 1. 그리드를 사용하고자 하는 가 부모 로 묶여 있어야한..
-
[생활코딩] CSS Box modelStudy/HTML & CSS 2019. 11. 26. 19:55
태그와 같이 제목으로 지정된 태그는 화면 전체(좌에서 우 끝까지)를 차지하고, 태그와 같이 화면 전체를 차지하지 않아 줄바꿈이 되지 않는 태그도 있다. 왜 이렇게 각 태그가 차지하는 공간이 다를까? 그 이유는 각 태그마다 차지하는 공간의 크기가 다르게 기본값이 설정되어있기 때문이다. block level element & inline element 화면 전체를 쓰는 태그를 block level element 라고 한다. 하지만 display: inline 속성을 추가하여 컨텐츠 크기만큼으로 변환할수도 있다. 자신의 컨텐츠 크기 만큼 화면의 부분만을 쓰는 태그를 inline element 라고 한다. 하지만 display: block 속성을 추가하면 화면 전체크기만큼으로 변환할 수 있다. 콤마를 활용하면 ..
-
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..