Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 도메인 주소에 대해 파헤쳐 보는 시간을 가져보도록 합시다! 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 패치 노트 알아보기 육성법 세계관 파밍장소 대악마 밑에 를 두 개 넣고 그 안에 로 네 가지의 이미지와 설명을 넣어 주었습니다.

안녕하세요 동기 여러분! 오늘은 점보트론에 대해 알아보도록 합시다! The Jumbotron 많은 웹 사이트들이 중요한 정보를 적어놓은 쇼케이스를 메뉴 밑에다가 두는 경우가 많은데요, 이걸 부트스트랩에서 적용을 하려면 점보트론이 필요합니다. 그럼 하나씩 만들어 봅시다. 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 어제의 코드에 이어서 바로 밑에 -> 부트스트랩에서 container은 기본적으로 반응형입니다. -> 그리드를 알아볼 때 안에 자식 태그들을 적고 12개의 columns 나누어 주는 작업을 했습니다. 여기서 row는 있으나 없으나 크게 차이가 없습니다. text-center는 부트스트랩에서 글씨를 중앙으로 정렬해주는 역할을 수행합니다. 은 부트스트랩에서 버튼을 만들어주는 역할을 합니다...

건강하세요 동기 여러분! 오늘은 어제 알아본 그리드를 토대로 간단한 웹 페이지 헤더를 만들어 보도록 합시다. Header/Navigation 디아블로 2 레저렉션 패치 노트 클래스 아이템 토론장 태그를 이용해 메뉴를 만들어 주는데 크기는 md로 768px 이상으로 주고 (모바일 환경 이상 사이즈) column의 수는 8개를 주었습니다. 에 4개를 주었으니 딱 12개가 맞아떨어집니다. 태그를 이용해서 네 가지의 메뉴를 넣어 주었습니다. 실행 한번 해볼까요? 뭔가 제가 원하는 모습이 아닌데요... main2.css로 들어가서 CSS를 조정하여 깔끔하게 꾸며 봅시다. 첫 번째로 추가할 CSS 코드 body { font-family: "나눔바른고딕", "Times New Roman", serif; font-we..

안녕하시유 동기 여러분? 오늘은 부트스트랩의 그리드에 대해 알아보도록 해. On the Grid 부트스트랩이랑 프레임 워크 같은 게 인기가 좋은 이유 중 하나가 이들이 그리드를 제공하기 때문입니다. 에에? 그리드가 뭔데? 그리드는 HTML의 요소들을 변경할 수 있는 column을 사용해 정리할 수 있게 해 줍니다. 그리드를 사용하면 거기 앉아 있는 당신은! 반응형 페이지를 신뢰가 가고 빠르게(마스터 한 사람 기준ㅋㅋ) 만들 수 있습니다. 부트 스트랩의 그리드는 12개의 같은 사이즈의 column을 가지고 있습니다. 이들을 설정하여 페이지를 폰으로 보든 컴퓨터로 보든 안불편하게 만들 수 있습니다. 어떻게 쓰는건데? 부트스트랩 공식 사이트에서 제공하는 도표를 보도록 하겠습니다. 링크 : https://get..

안녕하세요 동기 여러분! 오늘은 부트스트랩에 연결하는 방법에 대해 알아봅시다! Connecting to Bootstrap 부트스트랩을 사용하면 반응형 웹을 아주 쉽고 빠르게 아니 없는거 보단 빠르게 만들 수 있습니다. 반응형 웹이란 무엇인가? 웹 사이트를 이용하는 다양한 기기들이 있습니다. (예 : 스마트폰, 패드, 컴퓨터, 닌텐도 스위치, 스마트 티비 등등) 이런 기기들의 화면 해상도도 다 다르고 호환성도 다 다릅니다. 이 다 다른 해상도와 호환성을 코드로 만드려면 아주 많은 시간과 자본이 소요 되기 때문에 부트스트랩을 이용하여 반응형 웹을 만듭니다. 연결하는 방법 부트스트랩 사이트로 들어 갑니다. 링크 : https://getbootstrap.com/ Bootstrap The most popular ..

안녕하세요 동기 여러분! 오늘은 부트스트랩(Bootstrap)에 들어가기 앞서 인스트럭션에 대해 알아봅시다! CSS Frameworks 부트스트랩은 CSS 프레임워크에서 인기가 좋다. 쉽고 빠르게 웹 사이트를 만들 수 있게 잘 정리된 CSS 코드와 디자인이 들어가 있다. 앞으로 알아볼 내용에 새로운 세 가지의 HTML 요소들이 있는데 header: 웹 페이지의 헤더를 구성하는 데 사용됩니다. footer: 웹 페이지의 풋터를 구성하는 데 사용됩니다. section: 웹 페이지의 섹션을 정의하는 데 사용됩니다. 다음 시간 부터 달려 봅시다ㅋㅋㅋ 오늘의 느낌 이준익 감독의 영화들을 참 좋아하는데 그중에서도 황산벌, 왕의 남자, 평양성, 사도, 부당거래 이 영화들은 진짜 너무 좋다. 사도 : (연기가 미쳤다...

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티... Working with Position 포지션 프로퍼티는 HTML의 요소들을 정확히 어디에 위치할지를 결정할 때 사용합니다. 포지션의 값(value) 중 유용하게 쓸 수 있는 게 바로 relative입니다. 오늘은 positon: relative;에 대해 알아보도록 합시다! position: relative;에 사용할 수 있는 프로퍼티들이 있는데, top, left, right, bottom이 있습니다. 위 네 가지의 프로퍼티들은 px, em, rem으로 설정이 가능한데 설정을 했다면 자기 자신의 위치로부터 top에서 ?px, left에서 ?px 만큼 이동을 합니다. 생김새 .showmethemoney { position: relative; top: ..