Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 CSS에서의 타입이 뭔지 알아보도록 합시다! Type { color: red; } CSS에서 이렇게 생긴 친구들을 선언문(declaration)이라고 합니다. 이 친구들의 기능은 상당히 중요한데요, 왜냐하면 선택된 HTML 요소의 스타일을 바꾸어 주기 때문입니다. 선택된 HTML의 요소는 바로 선언문 앞에 붙는 HTML의 요소입니다. p { color: red; /* 여기서는 p가 선택된 요소 */ } h1 { color: blue; /* 여기서는 h1이 선택된 요소 */ } 위에 나온 코드가 바로 타입 셀렉터(type selector) 사용의 예시라고 할 수 있습니다. 요소의 타입은 p, h1 -> HTML의 , 태그 - 구조는 이해가 가는데 말로 설명이 참 어렵네요....

안녕하세요 동기 여러분! 오늘은 CSS 파일에서 스타일을 작성하는 방법에 대해 알아 봅시다. (다 아는거라 그냥 빨리 ㄱㄱ) External Stylesheet h1 { color: red; } 링크가 되어 있는 파일이름.css에 위 방식으로 적으면 끝납니다... ..허허허 제가 배우고 있는 모든 내용은 CODECADEMY의 내용으로 저는 복습을 하고 있는 학생입니다. 링크 : https://www.codecademy.com/ Learn to Code - for Free | Codecademy Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new care..

안녕하세요 동기 여러분! 오늘은 이라는 태그를 사용해서 스타일을 꾸며보는 방법에 대해 알아봅시다! Internal Stylesheet 저번 포스팅에서는 인라인에 스타일을 적용해서 해당하는 태그의 스타일만 바꾸어 보았습니다. 문서 전체를 걸쳐 모든 의 색을 파란색으로 바꾸려면 어떻게 해야 할까요? 물론, CSS 파일로 넘어가서 설정을 해줘도 되지만 HTML 코드에서도 해줄 수가 있습니다. 생김새 HTML 코드 아무 곳에 태그를 쓰고 CSS 코드 방식으로 코드를 써넣어 주면 됩니다. 결과는??? 4가지 경우(헤드 위, 헤드 안, 바디 안, 푸터 안) 모두 똑같은 실행화면이 출력됩니다. 그래도 한눈에 알아보기 위해서는 헤드 안에 넣는 게 가장 좋아 보입니다. 오늘의 느낌 오늘 점심은 A&W에서 엉클 버거를 사..

안녕하세요 동기 여러분! 오늘은 인라인 스타일(HTML에서 CSS 코드를 바로 적용하는 방법)에 대해 알아보도록 합시다! Inline Styles CSS와 HTML은 확실히 다른 언어이지만 얘들은 떼어낼래야 떼어낼 수가 없는 단짝 친구이기 때문에 마치 순대국밥집이 몰려있는 시장에 있는 식당에 손님이 왔는데 밥이 없어서 급하게 옆 식당에서 밥을 빌려오는(?) ㅋㅋㅋ 그런 일이 가끔 일어납니다. 아니면 말고... HTML라는 식당에서 바로 CSS 식당의 밥을 빌려오는 기능이 있는데, 그것은 style 속성을 사용하는 것입니다. 아래의 코드를 보도록 합시다. 티끌모아 티끌이다! 시작 태그(opening tag)안에 style 속성을 넣어주고 color라는 프로퍼티(property)를 넣어주고 값(value)을..

안녕하세요 동기 여러분! 오늘은 CSS의 생김새에 뜯어 보도록 합시다! CSS Anatomy Selector/opening tag p { color: green; } 위의 CSS 코드를 HTML에 바로 쓰게 되면 가는 말이 고우면 얕본다! 위와 같이 쓸 수 있습니다. 여기서 p는 selector이고 이 opening tag입니다. Selector : 스타일을 할 요소의 이름입니다. p와 h1같이 정해져 있는 태그들은 CSS 코드에서 p {}나 h1 {}와 같은 방법으로 작성을 하지만 id값은 #id값 class값은 .class값으로 작성합니다. 아래의 코드에 예시가 있습니다. Opening tag : 시작 태그 애~뽀올 어흥 #apple { color: red; } .bear { color: brown;..

안녕하세요 동기 여러분! 오늘 부터는 CSS대해 달려보도록 합시다! Intro to CSS HTML은 기본적인 웹사이트의 구조를 담당합니다. HTML만을 가지고 웹사이트를 만든다면 상당히 투박하고 멋이 없습니다. 그래서 등장한 것이 Cascading Style Sheets(CSS)입니다. CSS에서는 적절한 색을 사용하고 폰트 타입을 바꾸어 넣고 이미지를 넣고 각 요소의 위치를 조정합니다. 그 밖에도 더욱 많은 기능들이 있습니다. 자 그럼 HTML에 CSS를 연결하는 방법부터 알아보도록 합시다. 가장 쉬운 방법 비주얼 스튜디오를 사용하면 아주 쉽게 연결을 해줄 수 있습니다. 1. 비주얼 스튜디오를 켠다. 2. 오른쪽 하단에 HTML이 설정 되어 있는지 확인 (제 비주얼 스튜디오는 항상 장고HTML을 기본..

안녕하세요 동기 여러분! 도메인 주소에 대해 파헤쳐 보는 시간을 가져보도록 합시다! Choosing a Domain Name 도메인 이름은 두 가지로 이루어져 있다. 세컨드 레벨 도메인(Second Level Domain)은 점 왼쪽으로 와야한다. (예 : naver.com) 탑 레벨 도메인(Top-level Domain)은 점 오른쪽에 와야한다. (예 : naver.com) 도메인 이름은 웹 사이트의 성격을 잘 반영할 필요가 있다. .com을 쓰는 웹 사이트가 무수히 많기 때문에 독특한 탑 레벨 도메인을 써보는 것도 괜찮을 거 같다. (예 : dongi-coding.tech) What Makes a Good Domain Name? 도메인 이름은 되도록 짧고 기억에 남게 지어야한다. 그리고 웬만하면 줄임..

안녕하세요 동기 여러분! 오늘부터 웹 사이트들이 어떻게 돌아가는지 알아보도록 합시다! How Websites Work 웹 사이트는 만들기만 하면 사람들이 볼 수가 없습니다. 마치 책을 써놓고 출판을 하지 않는 것과 같죠! Web Hosting 당신이 웹 사이트를 만들기 위해 여러 파일을 만들었다면, 그 파일들을 Web Hosting Server(웹 호스팅 서버)에 저장을 해두고 다른 사람들의 접근을 허용해야 합니다. 웹 호스팅 서버를 이용하기 위해서는 웹 호스팅 회사들의 도움을 받으면 좋습니다. (유료 회사도 있고 무료 회사도 있습니다.) Domain Names 웹 사이트를 호스팅 하기 위해선 도메인 주소가 필요합니다. 도메인 주소는 사람에게 친숙한 언어로 이루어진 웹 사이트 주소를 말합니다. 이 도메인..

안녕하세요 동기 여러분! 지난 시간까지 헤더도 만들고 점보트론도 넣고 내용도 넣어 보았습니다. 오늘은 가장 밑에 들어갈 footer를 넣어 마무리를 지어봅시다! Footers 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 동기의 디아블로 2 패치 노트 알아보기 육성법 세계관 파밍장소 대악마 © 2021 Dongi 우리가 봐야할 부분은 아래의 입니다. - footer를 container에 넣어주고(부트스트랩 적용을 위해) - (columns를 나누기 위해 설정/ 부트스트랩) 에 관한 설정입니다. - 블로그 링크 걸 부분 display: flex; - 내용들을 행으로 나열; justify-content: flex-end; - 내용들을 끝에서 부터 채움; 세 번째 CSS 코드 footer ul { li..

안녕하세요 동기 여러분! 오늘은 어제에 이어서 점보트론 아래에 내용을 채워주도록 하겠습니다! Supporting Content 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 동기의 디아블로 2 패치 노트 알아보기 육성법 세계관 파밍장소 대악마 밑에 를 두 개 넣고 그 안에 로 네 가지의 이미지와 설명을 넣어 주었습니다.