Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 점보트론에 대해 알아보도록 합시다! 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: ..

안녕하세요 동기 여러분! 오늘은 요소들을 가지런히 웹 페이지 안에 정렬하는 방법에 대해 알아봅시다! Display: Flex 지난 시간까지 사용했던 예제를 보면 사진들이 촥 정렬이 되어 있는 것을 볼 수 있는데요, 코드 적용 전과 후를 비교해보면서 알아보도록 하겠습니다. 적용 전 위의 사진은 아래의 코드를 뺀 상태입니다. .items { display: flex; flex-wrap: wrap; justify-content: center; } 코드를 한 줄 한 줄 적용해보고 어떤 기능이 있는지 적어보겠습니다. display: flex; 적용 후 display: flex;만 적었을 경우 flex-wrap의 속성은 자동으로 nowrap으로 지정이 되기 때문에 위 사진과 같이 사진이 행으로 쭉 나열되는 모습을 ..

안녕하세요 동기 여러분! 오늘은 CSS의 float 프로퍼티에 대해 알아봅시다! Using Float 저번 시간에 만든 메뉴바 옆에 빈 공간이 있는데 거길 채워 주고 싶을 때 float 프로퍼티를 사용하여 채워 줄 수 있습니다. 생김새 .bloglink { float: right; } float: right; 오른쪽에 띄우겠다. float: left; 왼쪽에 띄우겠다. float: none; 띄우지 않겠다. float: inherit; 요소는 요소의 부모로부터 float 값을 상속받겠다. 해봅시당 제가 최근에 시작한 디아블로2 블로그 링크를 빈 공간에 한번 채워보도록 하겠습니다. 동기의 디아블로2 블로그 ※ target="_blank" 새창에서 실행 이 코드를 태그 밑에 태그 위에 넣어주고 HTML 코드..

안녕하세요 동기 여러분! 오늘은 무조건 줄 바꿈이 이루어지는 요소를 한 줄에 박아 넣는 묘기를 선보이겠습니다. Keep It Inline HTML로 list를 작성하면 이 친구들은 절대 한 줄에 같이 나오지 않고 여러 줄에 나옵니다. 피카츄 라이츄 파이리 꼬부기 버터플 야도란 이럴 때 CSS로 display: inline; 으로 조정해주면 한 줄에 촥! 정렬합니다. li { display: inline; } 이게 답니다.ㅋㅋㅋㅋ 예 어제에 이어서 오늘은 태그를 사용해서 메뉴 바를 한번 추가해보았습니다. (용병 장비 사진도 업데이트하였습니다.) HTML 코드 탈셋 무공 체라소서 1.아이템 세팅 1.1본캐 장비 1.2용병 장비 1.1본캐 장비 머리 : 탈라샤 뚜껑 갑옷 : 탈라샤 갑옷 무기 : 222 탈라샤..

와쌉 동기 브로스! 마진(Margin) 프로퍼티에 대해 겁나 빠르게 알아 봅시다! 겁나 쉬움 Working with Margin 마진(Margin) 프로퍼티는 웹 사이트에서 HTML 요소들의 사이 사이에 공간을 설정할 수 있는 빠워를 가지고 있습니다. 생김새 .item { margin: 3px; } class ="item"을 가지고 있는 모든 요소들은 사이에 3px의 공간을 갖게 하라! margin-top : 위 공간 설정 margin-bottom : 아래 공간 설정 margin-left : 왼쪽 공간 설정 margin-right : 오른쪽 공간 설정 예 사실 이전 코드에서 margin을 사용 했기 때문에 별로 달라지진 않았습니다 ㅠ ㅠ 우리가 오늘 배운 내용의 CSS 코드 입니다. (지난번 코드와 다르..