안녕하세요 동기 여러분! 오늘은 폰트 사이즈를 바꾸는 방법에 대해 알아봅시다. Font Size p { font-size: 14px; } 잉? 이게 다입니다ㅋㅋㅋㅋ 하지만 이밖에도 더 많은 단위가 있으니... Pixel(px) 가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위 p { font-size: 16px; } em(The root element's font-size) 뿌리(최상위) 요소의 폰트 사이즈!!! 현재 HTML 문서에 지정된 폰트 사이즈의 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위 (예를 들어 현재 HTML 문서의 폰트 사이즈가 14px라고 치면 1rem은 14px, 2rem은 28px입니다.) 안녕하세요! * { font-size: 14px; } p { font-si..
안녕하세요 동기 여러분! 오늘은 웹페이지의 글씨체 바꾸기에 대해 알아봅시다! Font Family 웹페이지의 글씨체를 바꾸기 위해서는 font-family라는 프로퍼티가 필요합니다. 생김새 p { font-family: 굴림체; } 위 코드는 '태그 안에 있는 글씨체를 굴림체로 바꾸겠다.'라는 의미를 가지고 있습니다. font-family를 사용할 때 유의 사항 사용할 글씨체는 반드시 사용자의 컴퓨터에 설치되어 있거나 사이트에 다운로드되어 있어야 한다. 웹 세이프 폰츠(Web safe fonts)에 있는 글씨체들은 거의 모든 브라우저나 작동 시스템에 지원을 한다. 웹 세이프 폰츠(Web safe fonts)를 사용할 경우 모든 브라우저나 작동 시스템에서 같은 글씨체가 나오지 않을 수도 있다. 글씨체의 이..
안녕하세요 동기 여러분! 오늘은 여러 선택자를 한 옵션에 박아 넣은 방법에 대해 알아봅시다. Multiple Selectors 동기의 일기 오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다. 위의 HTML 코드의 글씨체를 한 번에 바꾸기 위해서는 다양한 방법이 있지만 오늘 배울 방법은 아래의 코드입니다. h1, p { font-family: '궁서체'; } 바로 , (comma)를 사용하여 구분하면 글씨체 한 번에 적용이 됩니다. 클래스가 섞인 경우 동기의 일기 오늘 아침에 일어나 닭가슴살과 밥을 먹고 딥스를 하였다. h1, .근엄 { font-family: "궁서체"; color: crimson; } crimson 색을 추가하였습니다. 클래스와 아이디가 섞인 경우 동기의 일기 오늘 아침에 일어나 ..
안녕하세요 동기 여러분! 오늘은 자손 결합자(Descendant Combinator)에 대해 알아봅시다! Descendant Combinator 자손 결합자(Descendant Combinator)는 저번시간에 배운 체이닝(chaining)의 반대 개념입니다. 체이닝에서는 CSS 코드에서 HTML 요소를 먼저 가져오고 클래스명을 쓰는 방식이었습니다. /* 예 */ h2.classname { color: red; } 자손 결합자(Descendant Combinator)는 이렇습니다. /* 예 */ .classname h2 { color: red; } 예시1 빨간색 글씨 파워~~~ 검정색 글씨 파워~~~ /* CSS 코드 */ .red h2 { color: red; } 이 둘을 적용하면 아래와 같은 화면이 ..
안녕하세요 동기 여러분! 오늘은 CSS에서의 체이닝에 대해 알아봅시다! Chaining CSS에서 속성 선택자(Attribute selector)를 지정할 때 HTML의 요소와 두 가지 이상의 CSS 선택자를 한 번에 사용할 수 있습니다. 예를 들어 아래와 같은 HTML 코드가 있습니다. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. CSS 코드로 다음과 같은 코드를 적용하면 첫 번째 "주먹이 곧 나의 무기요."에게만 적용이 됩니다. h2.operation { color: red; } 다음 예로는 아래와 같은 HTML 코드가 있습니다. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. 주먹이 곧 나의 무기요. CSS 코드로 두 가지의 경우의 코드를 적용하면 첫 번째 "주먹이 ..
안녕하세요 동기 여러분! 오늘은 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..
안녕하세요 동기 여러분! 오늘은 pseudo-class 가짜 클래스에 대해 알아보도록 합시다! Pseudo-class HTML에 input 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다. 네모 박스 안에 텍스트를 넣기 위해 클릭을 하면 아래와 같이 네모 박스가 짙게 변합니다. 뭬야? HTML에 a 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다. 이를 클릭할 때도 색이 변하고 돌아와도 링크의 색이 변합니다. 뭔가 적어보시오! 또한 HTML에 submit form을 만들어 실행하면 아래와 같은 화면이 나옵니다. 이때 제출에 마우스를 올려두어도 색이 변하고 제출을 누르면 색도 변하고 네모 박스도 짙어집니다. 위와 같은 활성화 된 상태도 CSS에서 꾸미거나 조절할 수 있는데 그것이 바로 오늘 알아볼 가짜..
안녕하세요 동기 여러분! 오늘은 속성(Attribute)에 대해 알아보도록 합시다! Attribute HTML에는 엄청나게 많은 속성들이 있습니다. MDN Web Docs에 가보면 Attribute list를 정리해두었는데 영어 실력 테스트 겸 한번 보시길 추천합니닼ㅋㅋ 전 읽다가 포기 링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes HTML attribute reference - HTML: HyperText Markup Language | MDN Elements in HTML have attributes; these are additional values that configure the elements or adjust their ..
안녕하세요 동기 여러분! 오늘은 ID를 알아봅시다! ID class가 HTML의 요소를 그룹으로 묶어서 굵직하게 스타일을 변경해주는 역할을 한다면 (포병 부대ㅋㅋ) id는 HTML의 요소를 하나하나를 집약적으로 스타일을 변경해주는 역할입니다. (특수 부대ㅋㅋ) 생김새 HTML 코드 빨간색입니다. CSS 코드 #red { color: red; } class는 앞에 점을 하나 붙였었는데 id는 #만 하나 붙여주면 됩니다. id는 여러 개가 적용이 안됩니다. Class와 동일한 방법으로 두 가지를 넣어서 실행을 했더니!!! 아무것도 적용되지 않은 모습을 확인할 수 있었습니다. 오늘의 느낌 코로나가 다시 기승을 부리고 있습니다. 다들 건강 조심하세요! 토론토도 일요일부터 restriction을 강화한다고 하네요..
안녕하세요 동기 여러분! 오늘은 클라스에 대해 알아보도록 하겠습니다. 일전에 다룬 적이 있어서 새로울 건 없지만 기본은 탄탄한 게 좋으니까요! Class 제가 포스팅한 [HTML] Attributes에 들어가 보면 HTML에는 자체의 속성을 정할 수 있는 기능이 있습니다. 바로 ID입니다. 링크 : https://dongi-coding.tistory.com/71 [HTML] Attributes 살람 알라이쿰! 킹덤 오브 헤븐이라는 영화에 보두앵 4세와 살라딘의 만남이 끝나고 서로에게 하는 인사말입니다. 살라딘이 알라이쿰 살람! 하면서 뒤돌아가는 장면은 명장면 중에 명장면인데, dongi-coding.tistory.com 그런데 말입니다. HTML과 CSS사이에 가장 많이 사용하는 연결(?) 속성은 cla..
- Total
- Today
- Yesterday
- css position
- for문
- 반복문
- 실수
- html
- 함수
- 자바스크립트
- HTML 기본
- 파이썬
- Python
- em
- 메서드
- html table
- 객체
- padding
- 프로그래머스
- Array
- Object
- Typescript
- Type
- 동기코딩
- 타입 좁히기
- Margin
- 타입스크립트
- method
- javascript
- CSS 포지션
- if문
- CSS
- function
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |