영국 척척석사 유학생 일기장👩🏻‍🎓

저번 시간에는 글꼴을 변경하는 방법을 알아보았습니다. 이번 시간에는 글자 크기와 굵기를 변경하는 방법을 알아보겠습니다. 1. 글자 크기와 굵기 변경하기 글자 크기를 변경하는 CSS 속성은 font-size 입니다. 예를 들어, h2에 해당하는 글자의 크기를 20px로 바꾸는 코드는 입니다. 또한, 글자의 굵기를 변경하는 CSS 속성은 font-weight 입니다. 예를 들어, h1에 해당하는 글자의 굵기를 300으로 설정하는 코드는 입니다. 코드잇이 엄선한 (크기 24px, 굵기 300) 프로그래밍 꿀팁 (크기 32px, 굵기 700) 배움의 기쁨을 세상 모두에게 (크기 24px, 굵기 300) 많은 코둥이들이 구독하고 있어요! (크기 32px, 굵기 700) 위의 글자 크기와 굵기를 적용하면 아래와 같..

저번 시간에 글자색을 바꾸는 방법에 대해 알아보았습니다. 이번 시간에는 글꼴을 변경하는 방법에 대해 알아보겠습니다. 1. 글꼴 바꾸기 글꼴을 바꾸는 CSS 코드는 font-family 입니다. font는 글꼴, family는 글꼴을 여러개 지정할 수 있다는 뜻입니다. body 태그에 입력하면 됩니다. body 태그에 글자색이 있다면 다음과 같이 세미콜론(;)을 이용하여 구분하면 됩니다. 라고 입력하면 sans-serif 체로 나타납니다. 만약, Arial 글씨체를 입력하고 싶다면 font-family: Arial 이라고 입력하면 되는데, 영문만 적용이 되고 한글에는 적용이 되지 않는 것을 볼 수 있습니다. 따라서 이라고 입력하면 Arial 글씨체가 적용되지 않는 언어에는 AppleGothic 글씨체를 적..

저번 시간에 영역을 나누고 배경색을 변경하는 방법에 대해 알아보았습니다. 이번 시간에는 글자색을 변경하는 방법을 알아보겠습니다. 1. 글자색 변경하기 글자색은 color라는 CSS 문법을 사용합니다. 맨 위에 있는 h1 태그에 라고 입력하면 제목의 글자색이 하얀색으로 바뀌는 것을 알 수 있습니다. p태그에도 마찬가지 방법으로 하면 글자색을 변경할 수 있습니다. 모든 페이지의 글자색을 바꾸고 싶으면 어떻게 해야 할까요? 방법은 페이지를 모두 감싸고 있는 태그를 찾아 글자색을 변경하면 됩니다. body 태그를 찾아 글자색을 을 입력하면 글자색을 지정하지 않은 문장에는 글자색이 모두 바뀝니다. 그러면 만약 저번시간에 학습한 배경색을 넣은 영역의 글자색을 바꾸고 싶다면 어떻게 해야 할까요? 그 방법은 ;(세미콜..

저번시간에 웹페이지에 하이퍼링크 추가하는 법을 알아보았습니다.이번시간에는 페이지에 영역을 나누고 배경색을 설정하는 방법을 알아보겠습니다.1.  페이지에 영역 나누고 배경색 설정하기 는 영역을 나누는 태그입니다. 하지만 영역을 나누는 것 말고는 아무런 모양이나 의미가 없습니다. 눈에 보이지 않는 박스라고 생각하면 됩니다. 따라서 한 영역의 배경색을 보라색으로 변경하고 싶을 때 로 입력하면 됩니다. 여기서 는 html 문법이고 "background-color:"는 CSS 문법입니다. 콜론(:)을 주의해야 할 것 같습니다. 보통 색상을 선택할때는 색상 코드를 사용합니다. 예를 들어, "background-color:#7542e0" 이라고 입력하면 좀 더 연한 보라색이 됩니다. 구글에서 color picker을..

저번시간에는 페이지에 하이퍼링크를 추가하는 방법을 알아보았습니다. 이번시간에는 웹페이지에 이미지 넣는 방법을 알아보겠습니다. 1. 페이지에 이미지 넣기 이미지를 추가하는 방법은 태그를 추가하면 됩니다. img는 image의 약자이고 src는 source의 약자이고 출처라는 뜻입니다. 따라서 "주소"를 출처로 이미지를 넣겠다는 뜻입니다. 이미지 태그는 안에 내용이 없기 때문에 시작태그 하나만 쓰면 됩니다. 먼저, 코드를 작성하기 전 이미지 파일을 아래와 같이 폴더 안에 넣어야 합니다. 파일을 넣고 난 후, 저번시간에 쓴 코드의 제목 아래에 두 가지의 이미지를 코드로 넣으면 다음과 같습니다. 1 2 3 7 8 Weekly Codeit 9 금요일에 만나는 코딩 한 스푼 10 코드잇이 엄선한 프로그래밍 꿀팁 1..

저번시간에 줄 바꿈하는 방법에 대해 알아보았습니다. 이번시간에는 웹페이지에 링크를 추가하는 방법을 알아보겠습니다. 1. 사이트에 링크 추가하기 하이퍼링크 태그를 추가하는 방법은 를 넣는 것 입니다. '='기호의 왼쪽에 있는 href가 속성(하이퍼링크)이고 '='의 오른쪽에 있는 주소가 속성 값입니다. 두 개의 링크를 넣어보면 아래와 같습니다. 1 2 3 7 8 Weekly Codeit 9 금요일에 만나는 코딩 한 스푼 10 코드잇이 엄선한 프로그래밍 꿀팁 11 12 컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요. 13 14 15 유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요. 16 17 18 수업 살펴보기 19 20 배움의 기쁨을 세상 ..

저번 시간에 문단 구분하는 방법을 알아보았습니다. 이번 시간에는 한 단락 안에서 줄 바꿈하는 방법과 문장에 꺾쇠 기호 넣는 방법을 알아보겠습니다. 1. 줄 바꿈 하는 방법 줄 바꿈을 하려면 바꾸고 싶은 문장 끝에 을 입력하면 됩니다. 여기서 br은 break line 의 약자입니다. 앞서 배운 meta 태그처럼 시작태그 하나로만 사용하기 때문에 문장 끝에만 입력하면 됩니다. 저번 시간에 만든 페이지의 제목을 줄바꿈 하면 다음과 같습니다. 1 2 3 7 8 Weekly Codeit 9 금요일에 만나는 코딩 한 스푼 10 코드잇이 엄선한 프로그래밍 꿀팁 11 12 컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요. 13 14 15 유용한 팁과 개발 지식을 매주 금요..

저번시간에 사이트에 이름을 붙여보았습니다. 오늘은 제목을 정하고 본문을 넣어보겠습니다. 1. 사이트에 제목 넣기 1 2 3 7 8 Weekly Codeit 9 코드잇이 엄선한 프로그래밍 꿀팁 10 배움의 기쁨을 세상 모두에게. 많은 코둥이들이 구독하고 있어요! 11 코딩이 즐거워지는 뉴스레터, Weekly Codeit 12 13 8 : heading(제목)의 약자입니다. 여기서 h1은 큰 제목을 의미합니다. 9 : h2는 작은 제목을 의미합니다. h2,h3,h4... 숫자가 클 수록 작은 제목을 의미합니다. 2. 사이트에 본문 넣기 각각의 제목 밑에 본문을 넣어보면 아래와 같습니다. 1 2 3 7 8 Weekly Codeit 9 금요일에 만나는 코딩 한 스푼 10 코드잇이 엄선한 프로그래밍 꿀팁 11 컴..

1. 사이트에 이름 붙이는 방법 1 2 3 6 7 안녕 HTML! 8 9 1 : html 문서라는 뜻입니다. 2 : 꺾쇠로 감싼 것을 태그라고 합니다. 는 종료태그 입니다. 를 입력하면 는 자동으로 입력됩니다. 태그 사이에 내용을 입력하면 됩니다. 3 : head는 페이지에 대한 정보를 나타냅니다. 내용이 아니라 페이지에 대한 정보이기 때문에 페이지에는 나타나지 않습니다. 4 : title은 사이트의 이름을 의미합니다. 6 : body는 페이지에 표시되는 내용입니다. 2. 한글이 깨지는 현상 해결하는 방법 '안녕 HTML'에서 한글인 '안녕' 부분이 깨져보이는 경우가 있습니다. 이는 인코딩(Encoding)이 달라서 생기는 경우입니다. 인코딩이란 어떤 숫자가 어떤 문자에 해당하는지 정해 놓은 규칙입니다...