HTML 공부하기 : 파일 폰트 적용(배달의 민족 폰트) 웹 폰트를 사용해서 적용 https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Google-%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=841354 HTML 공부하기 : Google 폰트 사용하기 폰트를 사용할 때 설치되어 있는 폰트만 사용하면 제한적이고 페이지가 지루해보일 수도 있다. 그렇기 때문에 인터넷에 있는 폰트를 사용해보려한다. 대표적으로 Google 폰트가 있다. https://fonts.google.com/ G.. awesomek.tistory.com 이번에는 내 PC에 있는 폰트를 사용해서 적용해보려한다. 요즘 무료로 배포하는 배달의 민.. 2020. 2. 27. HTML 공부하기 : Google 폰트 사용하기 폰트를 사용할 때 설치되어 있는 폰트만 사용하면 제한적이고 페이지가 지루해보일 수도 있다. 그렇기 때문에 인터넷에 있는 폰트를 사용해보려한다. 대표적으로 Google 폰트가 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google font 적용하기 구글에서 제공하는 폰트가 엄청나게 많다. 이중에 마음에 드는 폰트가 있다면 옆에 + 버튼을 누르면 된다. 1.가장 이뻐보이는 Lacquer 와 Yeon Sung 폰트를 선택했다. * 선택하면 아래 2Families Selected 라고 보인다. 2. Families Sele.. 2020. 2. 25. HTML 공부하기 : 텍스트 스타일링(text-align, text-decoration, 폰트크기) text-align 속성 텍스트를 왼쪽, 오른쪽, 가운데로 정렬 text-align : left; 텍스트를 왼쪽 정렬 text-align : center; 텍스트 가운데 정렬 text-align : right; 텍스트 오른쪽 정렬 Text-decoration text-decoration으로 글 아래, 위, 글 관통, 그리고 하이퍼링크에 아랫줄을 없앨 수 있다. text-decoration: underline; : 글 아래 밑줄 text-decoration: overline; : 글 위 줄 생성 text-decoration: line-through : 글 관통 text-decoration: none : 글자 밑에 라인 생성안함 (보통 하이퍼링크를 생성하면 밑줄이 자동으로 생성되는데 none으로 하면 밑줄이.. 2020. 2. 24. HTML 공부하기 : 텍스트 색깔 지정(htmlcolorcodes.com 활용하기) h1 { color : 색지정; } 보통 우리가 색을 지정할 때 [색지정] 란에 orange, blue, red 간단한 기본 색만 입혀봤었다. 하지만 항상 이렇게 red, blue, orange만 사용할 수 없다. 다양한 색을 입혀보자! https://htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 위 사이트에 접속하면 본인이 원하는 색을 찾아 변경할 수 있다. 위에 RGB는 무엇일까? RGB는 빨.. 2020. 2. 24. HTML 공부하기 : CSS 따로 만들어서 link로 연결 스타일 입히는 방법은 총 3가지로 알고 있다. 1. HTML 에서 사이에 태그를 이용하여 스타일 하는 법 2. 2020. 2. 18. HTML 공부하기 : <div>태그 활용하기 태그 예를 들어보기 위해 간단히 테스트 할 html을 만들어보았습니다. 사진은 제 블로그에 있는 사진을 링크걸어 가져왔습니다. 그래도 조금은 스타일을 주기위해 텍스트는 가운데 위아래 마진을 100px을 줬습니다. 그래도 뭔가 허전합니다. apple house와 화해당 나누기 위해 태그를 이용해서 나눠보겠습니다. 애플하우스와 화해당 내용을 div 태그로 감싸주고 class로 "맛집"라고 지정했습니다. 그다음 head 쪽 style에서 배경화면, 모서리 부분 여러 스타일을 주었습니다. 그럼 위와 같이 깔끔하게 정돈할 수 있는 것을 볼 수 있습니다. 태그는 각각의 블록을 알맞게 CSS를 활용하여 배치할 수 있는 장점이 있습니다. 2020. 2. 17. HTML 공부하기 : id(아이디) 활용 / class와 차이 https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Class-%EC%9D%B4%EC%9A%A9%ED%95%98%EA%B8%B0?category=841354 HTML 공부하기 : Class 이용하기 https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-CSS-%EC%9E%85%ED%98%80%EB%B3%B4%EA%B8%B0?category=841354 HTML 공부하기 : CSS 입혀보기 HTML은 내용을 담고 CSS 스타일을 담.. awesomek.tistory.com 이전에 class를 이용해서 원하는 문장을 꾸며보았다. 똑같이 원하.. 2020. 2. 8. HTML 공부하기 : Class 이용하기 https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-CSS-%EC%9E%85%ED%98%80%EB%B3%B4%EA%B8%B0?category=841354 HTML 공부하기 : CSS 입혀보기 HTML은 내용을 담고 CSS 스타일을 담당 태그를 글자를 크게 하고 가운데로 옮기자 이전에 에 을 이용하여 글자의 폰트나 크기 등을 조절할 수 있었다. CLASS를 이용하여 스타일 예를 들어 태그가 위 사진과 같이 여러개일 경우, 그리고 하나만 스타일 해주고 싶으면 어떻게 할까? 태그 전체를 스타일해줄 때는 위와 같이 작성하여 쉽게 할 수 있었다. 저 3개의 태그 중 하나만 꾸며줄경우 여기서 세번째 문단이라는 것만 변경을 해보겠다.. 2020. 2. 5. HTML 공부하기 : 이미지 삽입하기 기존 작성된 코드로 활용 테스트 중입니다. 라는 텍스트 밑에 그림을 집어 넣어보려한다. 이미지 삽입 내 블로그 내에 있는 사진 가져오기 사진에 마우스 오른쪽으로 하면 사진 링크를 복사할 수 있다. 사진 주소 : https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fk.kakaocdn.net%2Fdn%2FSn9ZQ%2FbtqBzkbc7SK%2FsBlidZoyDLLWOkCwyneuzK%2Fimg.png 테스트 중입니다. 텍스트 아래에 코드를 작성 결과를 보면 사진이 삽입된 것을 알 수 있으나 사진이 너무 커서 사진 조정이 필요 사진 크기 조정 기존 코드에서 뒤에다 width="300" 을 추가해준다. 그럼 이렇게 사진이 조정된.. 2020. 2. 3. 이전 1 2 3 다음
