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) 왜 이렇게 파일 형식이 다르냐면 브라우저마다 지원하는 폰트 형식이 다르기 때문입니다. 아래의 링크..

안녕하세요 동기 여러분! 오늘은 온라인 폰트 서비스에서 폰트를 가져와 사용하는 방법에 대해 알아봅시다! Web Fonts Using 온라인 폰트 서비스를 이용해서 내 컴퓨터에 없는 폰트를 사용할 수 있는데요. 이 방법에 대해 알아봅시다. 구글 폰트 : https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰츠에 들어가시면 엄청나게 많고 다양한 폰트들을 만나볼 수 있습니다. 폰트 가져오는 방법 1. 링크로 접속을 한다. 2. 원하는 폰트를 찾습니다. 저는 'Bungee'라는 폰트를 찾아보겠습니다. 그리고 클릭합니다. (뭔가 클래식..

안녕하세요 동기 여러분! 오늘은 글자 사이의 간격(자간)과 단어 사이의 간격, 줄 높이를 바꾸는 방법에 대해 알아봅시다! 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 등등) 아래는 예입니다...

안녕하세요 동기 여러분! 오늘은 대문자, 소문자에 바꾸는 방법에 대해 알아봅시다! Text Transformation 영어를 소문자와 대문자로 바꾸어 주는 방법입니다. 대문자로 바꾸는 방법과 예 state the nature of your medical emergency. - starcaft medic p { text-transform: uppercase; } 소문자로 바꾸는 방법과 예 p { text-transform: lowercase; } 단어의 맨 앞글자만 대문자로 바꾸는 방법과 예 p { text-transform: capitalize; } 오늘의 느낌 느낌적인 느낌

안녕하세요 동기 여러분! 오늘은 색의 투명도를 설정하는 방법에 대해 알아봅시다. Opacity and Alpha 투명도를 조절하는 방법에 대해 알아봅시다. p { background-color: hsla(77, 100%, 50%, 0.1); } hsl에 a가 붙었습니다. 네~ 바로 이친구가 alpha입니다. alpha는 투명도를 조절하는 값인데 0부터 1까지의 소수점 숫자로 표현할 수 있습니다. 숫자가 낮을 수록 투명해지고 높을 수록 진해집니다. rgb로도 설정이 가능한데 그냥 rgb 뒤에 a를 붙여주면 됩니다. -> rgba(55, 55, 55, 0.5) 해봅시다. HTML CSS body { background-color: hsla(34, 100%, 50%, 0.1); } #a1 { backgroun..

안녕하세요 동기 여러분! 오늘은 색을 나타나는 또 하나의 방법 HSL에 대해 알아봅시다! HSL HSL 무슨 총 이름 같이 생겼는데 색을 나타내는 CSS의 기능입니다. Hue는 색깔, 빛깔, 색조, Saturation은 포화도, Lightness는 밝기라는 의미를 가지고 있습니다. 생김새와 정의 color: hsl(50, 70%, 30%); hsl바로 옆에 나오는 숫자가 바로 hue의 값입니다. hue는 0부터 360까지의 색을 가지고 있는데 빨강 계열은 0, 노랑 계열은 60 초록 계열은 120 파랑 계열은 240, 다시 빨강 계열은 360에 가까울수록 비슷한 색이 나옵니다. 두 번째로 나오는 퍼센트의 값이 saturation의 값입니다. saturation이 여기서는 '채도'입니다. 채도는 색의 선명..

안녕하세요 동기 여러분! 이번 포스팅에서는 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..

안녕하세요 동기 여러분! 오늘은 디스플레이 프로퍼티의 값인 블록에 대해 알아봅시다! Display: Block 어제는 필요한 만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 HTML의 요소들을 알아보았는데 오늘은 오면 바로 가로의 공간을 다 차지하는 블록 레벨 요소(Block-level element)들을 표로 정해보았습니다. 태그 설명 연락처 글, 기사 내용 어사이드 내용 (설명이나 따로 추가할 내용에 주로 씀) 긴 블록 형태의 인용문 (CSS로 설정해줘야 효과가 들어감) 사용자의 행동에 의해 보이거나 숨길 수 있는 정보를 담음 ( 태그와 기능은 비슷 ) 눌러줘 숨은 정보 등장 대화 상자 - Firefox, Internet Explorer 디스크립션 리스트에 있는 용어 설명 문서..