Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 글자에 색을 입히는 방법에 대해 알아보도록 합시다! Colour 아래의 코드는 CSS 코드입니다. h1 { color: blue; } CSS에는 이름으로 지정된 색이 140가지나 있습니다. 140가지는 아래의 링크로 가시면 확인해보실 수 있습니다. w3school HTML Color Values : https://www.w3schools.com/colors/colors_hex.asp HTML Color Values W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like ..

안녕하세요 동기 여러분! 오늘은 HTML에 CSS로 폰트를 적용하는 방법에 대해 알아봅시다! font-family 아래는 CSS 코드입니다. h1 { font-size: 32px; font-family: "Comic Sans MS", "서울남산 장체EB", serif; } Selector로 h1을 정해 놓고 중괄호 안에 font-family: "Comic Sans MS", "서울남산 장체EB", serif;가 오늘 알아볼 부분입니다. 제가 위 코드에 글꼴을 무려 3개나 적어 놓았는데 이유는 혹시 몰라서 입니다. 이게 무슨 소리인가? (누가 기침 소리를 내었어? 금부장은 무얼하는가? 어서 저놈의 ...) "Comic Sans MS"를 적어 놓은 이유는 영어 철자의 글꼴을 바꾸어 주기 위함 "서울산 장체 E..

안녕하세요 동기 여러분! 오늘은 CSS의 기본 틀과 모양에 대해 알아보도록 합시다! Anatomy of a CSS Rule 위 그림을 보고 알아봅시다. CSS의 인스트럭션(instruction)들은 HTML의 요소 또는 그 그룹을 어떻게 스타일할지 특정합니다. selector : 정확히 어떤 HTML의 요소를 특정할지 정합니다. 위 그림에서는 h1이 selector입니다. properties and values : { } 중괄호(curl brackets) 안에 위치하는 selector가 특정한 HTML 요소를 어떨게 스타일할지 결정하는 역할을 합니다. 위 그림에서는 color가 property이고 value가 red로 정해져 있어 h1의 요소들은 빨간색으로 나타납니다. 오늘의 느낌 오미크론이 전세계로 퍼..

안녕하세요 동기 여러분! 드디어 오늘 HTML에 CSS(stylesheet)을 연결하는 방법에 대해 자세히 알아보겠습니다! Link to a Stylesheet 지금까지 제가 포스팅한 예제들을 보면 흰 바탕에 검은 글씨가 전부인 아주 기본적인 웹 페이지들이었습니다. 하지만 CSS를 사용한다면 깜찍뽕짝한 웹 페이지들을 만들 수 있게 됩니다. HTML의 링크 요소를 사용하면 CSS 파일의 스타일을 입힐 수 있게 됩니다. CSS 파일에 링크 / 생김새 링크 요소에는 세 가지 속성들을 사용합니다. - rel : 링크할 파일과 현재 파일의 관계를 명시합니다. 위와 같은 경우에는 rel의 속성이 "stylesheet"입니다. - type : 링크할 파일의 타입을 명시합니다. - href : 링크할 파일의 URL을 ..

안녕하세요 동기 여러분! 오늘은 List를 복습하고 Div에 CSS를 연결해주는 연습을 해보고 메타데이터를 알아보도록 합시다. List 복습 리스트 종류는 두가지가 있었는데 1부터 순차적으로 순서가 정해지는 ordered list와 앞에 점이 생기며 순서대로 나오는 unordered list가 있었습니다. 혹시 기억이 가물가물 하신 분들은 제 포스팅을 참고해주시면 감사하겠습니다. https://dongi-coding.tistory.com/75 [HTML] Ordered/Unordered Lists 안녕하세요. 동기 여러분! 오늘 저녁을 맛있는 버섯 전골을 먹고 디저트를 몹시 먹고 싶었지만 꾹 참고 프로틴 바를 먹고 분노의 풀업을 한후에 포스팅 중 입니다. 하하하하하하하하하하하하하 dongi-coding...

안녕하세요 동기 여러분! 오늘도 복습한다 생각하고 이미지와 비디오 추가 방법 빠르게 알아봅시다! Image Video 예 이미지 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 기본 HTML에서 배운 모든 것을 때려 박아 넣었습니다. 태그를 사용해 이미지를 분리시켜주고 태그를 태그로 감싸서 이미지의 설명으로 붙게 만들었습니다. alt도 잊지 않고 사용해주어 사용자들이 검색을 할 때 SEO에 걸리게끔 유도하여 검색 노출빈도를 올려 주었습니다. 가모라 사진을 가져올 때 크기가 너무 커서 style을 적용하여 크기를 적당하게 줄여 주었습니다. 아래는 실행 화면입니다. 비디오 비디오는 위에 소개한 방법보다 아래의 방법을 더 많이 씁니다. (Youtube 기준) ..

안녕하세요 동기 여러분! 오늘은 문단(Paragraph)과 링크 다는 방법(Anchor)에 대해 알아봅시다! 복습하는 의미로 빠르게 갑시다! Paragraph 문단입니다. 생김새 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 아래는 실행 화면입니다. Anchor 태그로 링크를 걸어줄 수 있습니다. href = Hypertext REFerence를 속성으로 넣어서 주소를 넣어주면 됩니다. 태그 사이에는 클릭이 가능한 문구를 넣어줄 수 있습니다. 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 아래는 실행 화면입니다. 아래는 정보 출처인 나무 위키의 모습입니다. 링크 : 클릭 어때요? 정말 쉽죠? 오늘의 느..

안녕하세요 동기 여러분! 오늘은 헤딩(Heading)에 대해 알아봅시다. HTML의 기본을 다 배우신 분들이면 아는 내용이긴 하지만 복습한다고 생각하고 가봅시다! Add a Heading HTML에서 아주 자주 쓰이는 요소가 바아로 Heading입니다. 종류는 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이게 뭔가 싶으신 분들은 웬그막 시청 바랍니다. 링크 : https://www.youtube.com/watch?v=YRuqsIiexgc 대체적으로 은 한페이지에 딱 한 번만 사용하길 권장하는데 2개 넣는다고 오류가 나지는 않습니다. 예 마블 코믹스 유니버스 1.히어로 1.1 히어로 팀 1.2 사이드 킥 2.빌런 2.1 닥터 스트레인지의 주요 악당들 2.2 스파이더맨의 주요 악당들: 시니스터 식스, 스파이더맨 리벤지 스쿼드 ..

안녕하세요 동기 여러분! HTML의 기본기들을 다 알아봤으니 HTML이 어떤 구조를 가지고 있는지 차근차근 알아보도록 합시다! Anatomy of an HTML Element 마블 히어로 HTML의 모든 요소들은 앞 태그(opening tag)로 시작해야 합니다. (예 : , ) 거의 모든 요소들은 뒷 태그(closing tag)가 필요로 하는데 태그의 이름 앞에 /(slash)를 넣어줍니다.. (예 : , ) 사용자들은 태그 사이에 있는 내용만 볼 수 있습니다. 오늘의 느낌 오늘은 여기까지! 다음에 봐요~~~