Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 폰트 당겨오기 두 번째 시간입니다. 갑시다~ Web Fonts Using @font-face 저번 시간에 사용한 태그 말고도 폰트를 스타일 시트에 넣는 방법이 있는데 그것이 바로 @font-face를 이용하는 것입니다. @font-face의 장점은 개발자가 의도하여 넣은 글꼴을 사용자가 컴퓨터에 가지고 있지 않아도 다운로드되어 자동으로 보입니다. 폰트는 아래의 형식(format)의 파일로 나타나게 되는데 OTF (OpenType Font) TTF (TrueType Font) WOFF (Web Open Font Format) WOFF2 (Web Open Font Fotmat2) 왜 이렇게 파일 형식이 다르냐면 브라우저마다 지원하는 폰트 형식이 다르기 때문입니다. 아래의 링크..

안녕하세요 동기 여러분! 오늘은 글자 사이의 간격(자간)과 단어 사이의 간격, 줄 높이를 바꾸는 방법에 대해 알아봅시다! Text Layout Letter Spacing 글자 사이의 간격(자간) 글자 사이의 간격을 정하는 방법은 간단합니다. p { letter-spacing: 2px; } 네 ~ 이게 다입니닼ㅋㅋ 물론 mm, in, em 등등 다양한 단위로도 가능합니다. 아래는 예입니다. HTML Wraith awaiting launch orders. - Starcaft Wraith CSS p { letter-spacing: 5px; } Word Spacing 단어 사이의 간격 p { word-spacing: 3px; } 역시 다양한 단위로 설정 가능합니다. (mm, in, em 등등) 아래는 예입니다...

안녕하세요 동기 여러분! 이번 포스팅에서는 Clear에 대해 알아봅시다! Clear Clear 프로퍼티는 'bump'(

안녕하세요 동기 여러분! 오늘은 float 프로퍼티에 대해 알아봅시다! Float 영어사전에 float을 찾아보면 (액체위에) '띄우다'라는 뜻이 있습니다. 우리는 웹 페이지에 왼쪽이나 오른쪽 어디에 '요소를 띄우다'라고 생각하고 공부하면 좋을 것 같습니다. (보통 이미지와 텍스트를 한 컨테이너에 담고 싶을 때 사용합니다.) float 프로퍼티에는 총 4 가지의 프로퍼티가 있습니다. 아래의 표를 봅시다. float의 값 설명 left 해당 요소의 컨테이너 왼쪽으로 띄웁니다. right 해당 요소의 컨테이너 오른쪽으로 띄웁니다. none 기본 값. inherit 부모 요소의 float 값을 상속 받습니다. 컨테이너는 여러 요소를 담을 수 있는 큰 박스를 말합니다. 그림을 정말 못 그렸는데 이 그림은 flo..

안녕하세요 동기 여러분! 오늘은 디스플레이 세 번째 시간으로 인라인 블록에 대해 알아봅시다! Display: Inline-Block 인라인 블록(Inline-Block)은 인라인과 블록을 합쳐 놓은 혼종입니다. (아몬께서 만드신) width와 height를 이용해서 블록의 크기를 정하고 그 블록들을 가로로 나열 할 수 있게 합니다. 생김새와 작동 아래의 코드를 실행해보겠습니다. 혼종1 혼종2 혼종3 /* CSS */ div { font-size: 50px; color: aliceblue; width: 300px; height: 300px; background-image: url("https://w.namu.la/s/47ec9f11f341310729db986719fdba6d85fb18c8a5194c6d05..

안녕하세요 동기 여러분! 오늘은 Visibility 프로퍼티에 대해 알아보도록 합시다! Visibility visibility를 영어 사전에 찾아보면 눈에 보임, 가시성 등등의 뜻을 가지고 있습니다. 흠 그럼 뭔가 보이게 하고 안 보이게 하는 프로퍼티겠군요? 생김새 p { visibility: hidden; } Visibility의 값들 값 설명 visible 기본 값. 요소가 보임. hidden 요소가 숨겨짐 (하지만 공간은 차지하고 있음!) collapse 테이블의 열 또는 행을 제거해기 위해 사용 (display: none;처럼) 해봅시당 visible 안녕하세요 동기 여러분! /* CSS */ p { visibility: visible; } hidden 안녕하세요 동기 여러분! /* CSS */ ..

안녕하세요 동기 여러분! 오늘은 새해 기념으로 CSS의 마진(Margin)과 페딩(padding)의 값을 초기화하는 방법을 알아봅시다! Resetting Defaults 우리가 많이 사용하는 크롬, 파이어 폭스, 마이크로소프트 엣지 등등 큰 회사의 브라우저들은 외부의 스타일시트가 없을 경우 자동으로 적용되는 기본 스타일시트가 있습니다. 이 기본 스타일 시트를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다. 크롬에서 외부 스타일 시트 없이 웹 페이지를 만들면 저는 CSS파일을 연동은 했지만 비워둔채 실행을 했는데요. 빨간 네모안을 보면 user agent stylesheet라고 쓰여 있고 margin: 8px;라고 설정이 되어 있습니다. 위와 같이 유저 에이전트 스타일시트가..

안녕하세요 동기 여러분! 오늘은 Overflow에 대해 알아봅시다. Overflow라는 단어 주방에서 일할 때 자주쓰는 단어인데 여기서 만나니 반갑네용ㅋ Overflow 하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루 천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루 우리의 짱구는 정말 못말려 (짱구야~) 짓궂은 장난은 나에게 맡기세요 이 세상 누구보다 자신이 있다구요 이리모여 모두 모여 양파를 먹어보자 그런 눈으로 바라보면 부끄럽죠 엄마~ 아빠~ 나는 인기만점 (짱구야~) 천방지축 어리둥절 빙글빙글 모두가 정신이 없네~ 짱구는 대단하네 짱구는 천재라네~ 다음은 무엇을 할까? 하나 둘 셋 야 ~~ 뚜루루루루루루루 뚜루루루 천방지축 어리둥절 빙글빙글 돌아가는 짱구의 하루 우리의 짱구는 정말 못말려 (짱구야~)..

안녕하세요 동기 여러분! 오늘은 type vs class vs ID에 대해 싸움을 붙여봅시다! Specificity type과 class, id 모두 같이 적용한다면 무엇이 적용될까요? ROUND 1 type vs class vs id 승자는 누구인가! type이 승리시 빨간 글씨 class가 승리시 파란 글씨 id가 승리시 초록 글씨가 나오게 설정해두었습니다. h1 { color: red; } .blueclass { color: blue; } #greenclass { color: green; } 결과는? id의 승리!!! ROUND 2 type vs class 승자는 누구인가! type이 승리시 빨간 글씨 class가 승리시 파란 글씨가 나오게 설정해두었습니다. h1 { color: red; } .bl..

안녕하세요 동기 여러분! 오늘은 CSS에서의 타입이 뭔지 알아보도록 합시다! Type { color: red; } CSS에서 이렇게 생긴 친구들을 선언문(declaration)이라고 합니다. 이 친구들의 기능은 상당히 중요한데요, 왜냐하면 선택된 HTML 요소의 스타일을 바꾸어 주기 때문입니다. 선택된 HTML의 요소는 바로 선언문 앞에 붙는 HTML의 요소입니다. p { color: red; /* 여기서는 p가 선택된 요소 */ } h1 { color: blue; /* 여기서는 h1이 선택된 요소 */ } 위에 나온 코드가 바로 타입 셀렉터(type selector) 사용의 예시라고 할 수 있습니다. 요소의 타입은 p, h1 -> HTML의 , 태그 - 구조는 이해가 가는데 말로 설명이 참 어렵네요....