1. 깃허브에서 폰트 파일을 다운받아 작업 폴더에 넣어준다. https://github.com/innks/NanumSquareRound GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. Contribute to innks/NanumSquareRound development by creating an account on GitHub. github.com 2. 다운받은 파일 안의 nanumsquareround.css를 열어보면 아래와 같은 내용이 작성되어 있다. /* 나눔스퀘어라운드 웹폰트 v1.11 https://github.com/innks/N..

Bootstrap과 JavaScript 플러그인을 이용하여 클릭할 때마다 하단 컨텐츠 내용이 바뀌는 동적 탭메뉴를 구현하였다. 해당 모듈의 코드는 두 가지 부분으로 나눌 수 있다. Menu1 Menu2 Menu3 1) 첫번째 부분은 과 태그를 이용하여 nav의 구조를 만들어주는 부분이다. 부모 태그인 ul에 "nav nav-pills" 를, 자식 태그인 li에 "nav-item"을 작성하여 구조를 만든 뒤, 각 nav-item 안에 앵커 태그를 작성하여 각각 클릭 시 별도의 id를 가진 요소를 노출하도록 하였다. 오늘의 세트메뉴1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labo..

부트스트랩으로 드롭다운 메뉴 구현! 뭔가 느낌있는 박스가 완성되었다. 부트스트랩을 이용하는 방법은 공식 문서에서 부트스트랩 stylesheet 링크를 복사하여 헤더에 넣어주는 것이다. 또 문서에서 jQuery library, Popper JS, bootstrap.js, 통합 js 번들도 데려올 수 있다. Dropdown button html css javascript bootstrap jsp/a>

부모 개체에게 display : flex를 선언해주면 float처럼 다른 박스들의 흐름을 해치지 않고도 자식 요소에게 동일하게 적용되는 수직/수평 정렬을 쉽게 구현할 수 있다. flex-direction : row, row-reverse, column, column-reverse flex-wrap : nowrap, wrap, wrap-reverse order : 플렉스 아이템에 적용, 0보다 작은 값을 지정할 경우 제일 첫번째로 위치할 수 있다. * { box-sizing: border-box; /* 박스 사이즈를 width와 height 기준이 아닌 border 기준으로 설정 */ margin: 0; } body { font-family: "Roboto", sans-serif; letter-spacin..

1) 태그에 float 속성값을 부여하면 이전의 display 속성이 어떤 것이던 block이 된다. (block처럼 weight, height, border(top,bottom),padding(top,bottom), margin(top,bottom) 모든 block 속성 부여 가능) 2) 그러나 block이 지닌 특징인 margin auto값은 적용이 안되어 별도의 속성을 조정하지 않고 위치만 잡게된다면 한 줄로 흐르는 inline태그처럼 취급된다. 3) float이 적용된 개체는 부모 태그에 속한 자식 태그들과 레이어가 분리된다. - 그래서 개체가 겹칠수도.. 4) 또 이외의 개체들은 float으로 배치된 개체를 알아보는데, 부모 태그 안의 자식 태그들 (정사각형)에 float과 margin : 0 ..

Position 위치를 지정하는 CSS 속성인 position은 static(기본값), relative, absolute, fixed 네 가지 값이 있다. 1) 포지션은 top, right, bottom, left 속성과 함께 박스의 위치를 결정하고 2) 박스가 지닌 위치값 체계(?)를 변경한다. (ex. absolute로 절대 위치를 지정하면 해당 개체가 기존 개체에 위치가 밀리는 등의 영향을 받지 않는다.) static은 position의 기본값이다. 기본적으로 모든 요소는 겹쳐질 수 없으며, 기본적인 위치가 시작하는 좌표값은 브라우저 화면 최상단 최좌측의 점이다. relative는 원래 있어야하는 자리에서 변경을 시켜주는 것이다. absolute 위치 값의 축이 되기도 한다. absolute로는 절..