웹 검색 결과
5 개의 검색 결과가 있습니다.
Tistory Skin/작업 Log

티스토리 사이드 메뉴(카테고리) 만들기 #2

저번 글에 이어서 이번 글에서는 오른쪽 사이드 메뉴를 만들어봅시다. 오른쪽 메뉴에서는 제일 처음에 카테고리가 나오는 것이 사람들이 다른 글을 보더라도 접근성이 높아질 거 같습니다. 우선적으로 카테고리부터 만들어 봅시다. 카테고리 만들기 티스토리의 카테고리에는 2종류가 있네요. 첫번째와 같이 대략적으로 이미 디자인이 들어가 있는 경우가 있고, 밑에 부분은 디자인이 입혀지지 않은 경우네요. : 폴더 형식의 카테고리 (디자인이 적용된 경우) : 리스트 형식의 카테고리 (디자인이 적용되지 않은 경우) 저는 디자인이 입혀지지 않은 밑에 방식으로 만들어보도록 하겠습니다. 기본 틀 잡기 카테고리 저번 글에서 section > h3 부분의 디자인 중복이 될거 같아서, css를 약간 수정했습니다. /* 변경 전 */ a..

2019. 8. 24. 20:36
Tistory Skin/작업 Log

티스토리, 사이드 메뉴 만들기 (html, css, js)

저번에 이어서 왼쪽 사이드 메뉴를 만들어 봅시다. 왼쪽 사이드 메뉴에는 기본적으로 블로거에 대한 정보를 보여줄 예정입니다. 블로거 이름 블로거 사진 블로거 SNS 등의 contact 할 수 있는 정보 copyright (보통은 footer에 넣지만, 눈에 잘 안띄어서...ㅎㅎ) 기본 틀 구성 About Me addr email google facebook instagram git Copyright 2019. ’s Blog. All rights reserved. Designed by Hongku. 일단 출력하고 싶은 정보는 모두 작성했으니, CSS를 혀서 예쁘게 만들어 봅시다. 블로거 이미지 스타일 입히기 블로거의 이미지는 radius를 줘서 둥글게 만들려고합니다. 그리고 이미지를 클릭했을 때, 블로거의 ..

2019. 8. 24. 14:31
Tistory Skin/작업 Log

티스토리, 메인 컨텐츠 영역 및 레이아웃 만들기 (html, css, js)

이제 사이드 메뉴와 본문 글이 보여지는 메인 컨텐츠 영역을 만들어 봅시다. 일단 화면 구성은 반응형 웹 방식으로 만들겁니다. 브라우저의 크기에 따라 3단 레이아웃 2단 레이아웃, 스택(?) 레이아웃으로 나눌려고합니다. 제일 큰 화면 (1024px 이상): 3단 레이아웃 조금 큰 화면 (768px ~ 1024px): 2단 레이아웃 중간 및 작은 화면 (768px 이하): 스택 레이아웃 기본 틀 구성 일단 좌, 우 사이드 메뉴를 위한 aside 영역과 본문이 들어갈 article 영역을 만듭니다. side menu test side menu 위와 같이 영역 3개를 만듭니다. CSS 이제 flex-box를 이용하여 레이아웃을 만들어봅니다. 왼쪽 사이드메뉴와 오른쪽 사이드 메뉴의 넓이는 고정 크기로 설정할 겁니..

2019. 8. 24. 12:57
WEB/Angular.js

Angular.js의 모델(Model)과 HTML의 <select> 활용하기

Angular의 Model 활용 select 박스에서 option을 선택하면 바로바로 값이 화면에 나타나는 기능을 만들어 보려합니다. 일단, head 부분에 angular.js를 사용하기위한 라이브러리를 가져오는 태그를 넣어줍니다. ​ ng-app과 ng-controller를 설정해줍니다. ​ 이제 년, 월, 일을 받을 수 있는 select 박스를 3개를 만듭니다. (예제를 뭘로 하면 좋을지 생각이 안나서 날짜 가져오는 예를 들었지만, 사실 로 하는데 더 효율적인 것 같습니다.) - 2018 2017 ... 생략 ... 1993 1992 - 12 11 ... 생략 ... 2 1 - 31 30 ... 생략 ... 2 1 ​ 바인딩을 하기위해 각각의 select 박스에 ng-model을 넣었습니다. 그리고,..

2018. 11. 6. 18:47
Network

웹 페이지는 어떻게 불러올까? HTTP 프로토콜과 서버, 클라이언트(Server-Client)

웹 브라우저 주소입력칸에 URL을 입력하면 어떻게 통신을 하고 웹 페이지를 로드(load) 해올까?갑자기 어디선가 웹 페이지를 가져다 줄리는 없습니다. 어디선가 사용자의 요청을 받고 웹 페이지를 받아오게 됩니다. Server-Client웹 통신은 서버와 클라이언트 구조를 가집니다. 웹 브라우저는 웹 브라우저 주소 입력란에 지정된 URL을 이용해서, 웹 서버로부터 리소스(Resource)라는 파일 등의 정보를 얻어옵니다. 얻어온 정보들을 웹 브라우저를 통해 사용자는 볼 수 있게 됩니다. 여기서 클라이언트는 브라우저에 해당되고, 서버는 리소스를 주는 쪽에 해당됩니다. HTTP 프로토콜그렇다면, 통신을 할때는 어떻게 할까요? 컴퓨터 네트워크에서는 기본적으로 프로토콜을 이용해서 통신을 합니다. 프로토콜(prot..

2018. 11. 5. 20:52