올리비아 코딩스쿨

div divide(나누다, 분리하다)의 약자이다. 웹페이지 안에 들어 있는 여러 콘텐츠를 분할하여 관리한다. 웹페이지를 각각 별도로 다룰 수 있게 만들면 좀더 구조적으로 배치하거나, 개별적으로 스타일링하는데 좋다. 개발자 도구 들여다보기 개발자 도구로 가서, HTML 코드를 살펴보자. 여러 요소와 그 속성, 값을 알 수 있는데 CSS 스타일링을 할 때, 이런 것들을 파악하고 적용하는 것이 매우 중요하니. 주의깊게 공부해보자. the box model 박스 모델을 이해하기 위해, height, width, padding, border, margin의 속성들이 외관에 어떻게 영향을 미치는지 알아보자. HTML 태그 요소에서 속성을 아래와 같이 지정한다. 1) height, width height: 100%..

파비콘은 예전에 explore 5 시절에 사용하던 용도인데, 지금은 사용하지 않는다. 대신 우리는 파비콘을 내 웹사이트를 상징하는 아이콘의 느낌으로 사용하려고 한다. 웹사이트를 열었을 때, 웹사이트 타이틀 앞에 조그맣게 글자 크기 만큼으로 표시되는 이미지와 같은 기능으로 말이다. 이런 파비콘을 만드는 방법은 아래의 사이트를 이용하면 편리하다. https://www.favicon.cc/ favicon.cc 사이트로 들어가서 이미지를 로드하거나, 내가 새로운 파비콘을 창작하면 된다. 다운로드한 파비콘을 CSS> My site에 넣고, HTML 코드를 작성하여 웹사이트 타이틀 앞에 표시되도록 만들어보자! HTML tag에 rel 속성값으로 icon을 주고, href 속성값으로 만들어 놓은 favicon.ico..

meta Tag 1) 정의 데이터의 정보를 담고 있는 '메타 데이터'들을 정의한다. 메타 태그는 항상 안에 들어가 있으며, character_set 문자설정, description 해당 페이지에 관한 설명, keyword 문서에 관한 핵심 키워드, author 저자에 대한 정보 그리고 viewport해당 페이지를 볼 때의 화면의 크기, 비율 등에 관한 정보를 제공한다. 2) 사용 메타데이터는 실제 화면에는 보이지 않는다. 하지만 작동하고 있다. 메타데이터는 브라우저가 해당 페이지를 어떻게 화면에 표시할지에 대한 도움을 주고, 검색 엔진에도 영향을 끼친다. 메타데이터를 잘 사용하면, 방문객 유입도 올릴 수 있는 팁이 된다. 3) 속성 속성 attribute 값 value 설명 description char..

블루투스 키보드 추천 후기 X-Folding Laser 친구들에게 받은 생일 선물로 1년 6개월 정도 사용한 X-folding laser 블루투스키보드이다. 기존의 로지텍 블루투스 키보드와 비교하여 월등히 장점이 많다. 장점 - 엄청 가볍다. 휴대폰 무게보다 더 가볍다.(176g) - 블루투스 페어링이 아주 잘된다. - 블루투스 페어링이 3개까지 된다. - 블루투스가 끊기지 않고 사용 잘 된다. - 커버가 있어서 관리하기가 좋다. - 키감이 좋다. - 접을 수 있어서 보관 및 이동이 편리하다. 단점 - 키보드 중 B키(ㅠ키)가 왼쪽에 있어서 나처럼 오른쪽으로 쓰는 사람들은 너무 불편... 계속 오타난다. 블루투스 페어링하는 방법이다. 개인적으로 블루투스 키보드는 가볍고, 페어링 잘되고, 키감이 좋아야 하..

의사클래스 pseudo class에 대해 알아보자. HTML CSS reference에서 keyword 모음을 보면, 어떤 키워드는 앞에 ' : ' 쌍점이 있다. 이것이 바로 의사 클래스이다. 의사 클래스는 마우스를 가져다 놓은 상태와 아닌 상태에 따라 CSS가 변하는데, 이는 HTML 요소의 '다른 상태'를 보여준다. 예시로서 어떤 HTML 요소에 대해 :hover 의사 클래스를 선택하여, 그 요소의 스타일이 변경되도록 만들어보자. css파일에서 img 태그에 hover 의사 클래스를 적용한다. img:hover { background-color: red; } 원래는 아래처럼 배경색깔이 검정색이었지만, 마우스를 가져다대면, 배경색깔이 빨강색으로 바뀌는 것을 알 수 있다.