분류 전체보기230

• 

  [CSS3] display : grid ① Grid, 배우면 뭐가 좋을까? 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 기존에 Grid를 배우지 않은 상태에서는 float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder) 비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에.. Web/CSS 2020. 10. 18.

• 

  (TIR+2) ① 브라우저는 웹 서버에 보내는 메시지를 작성하기 위해 URL을 해독한다 우리는 하루에도 수십번씩 새로운 웹 사이트에 들어가, 정보를 열람한다. 그것이 데스크탑이든 스마트폰이든, 우리에게서 '웹(Web)'이란 이미 우리의 삶에서 떼어낼 수 없는 존재임은 분명하다. 그러나 우리가 웹 페이지에서 정보를 열람하기까지 어떤 기술이 숨겨져 있는지, 자세하게 아는 사람은 드물 것이다. 그래서 앞으로 필자는 블로그를 통해, HTTP 통신을 통해 서버와 클라이언트가 정보를 주고 받는 과정에 대해서 설명할 것이다. ⅰ. 브라우저는 웹 서버에 보내는 메시지를 작성하기 위해 URL을 해독한다. ⅱ. 브라우저는 OS에 HTTP 메시지를 송신하기 위해 웹 서버의 IP 주소를 DNS 서버에 조회한다. ⅲ. 브라우저는 OS의 프로토콜 스택에 메시지 송신을 의뢰하며, ⅳ. OS는 데이터의 송/수신 동작을.. CS/Network 2020. 9. 21.

• 

  [CSS] Position 속성 활용시, 주의하여야 할 점 1. Static & Relative - Position 속성이 정해지지 않으면, 기본적으로 지정되는 값이다. Static이란 말은 '정적인'이란 뜻으로 움직이지 않는 것을 의미한다. Relative와 비슷한 속성을 갖으며, 별다른 특성을 가지지 않는다. 2. Absolute - Absolute는 자신에게 적용된 정렬에 영향을 받지 않는다. 위치지정 역시, left/right/top/bottom 등을 활용하여 지정해주어야 한다. 또한, Absolute 포지션을 활용할 때에는 항상 상위 박스의 Position을 점검하는 습관을 갖아야한다. 왜냐하면 Position은 Static이 아닌, 부모 박스를 찾아 해당 박스 안에 속하여 위치가 지정되기 때문이다. See the Pen WNwgaLW by joonho.. Web/CSS 2020. 9. 18.

• 

  [CSS3] display : flex ② Flex 아이템에 적용되는 속성들 지난 시간에는 'Flex 컨테이너에 적용되는 속성들'에 대해서 알아보았다. 이번에는 컨테이너의 자식 요소인 아이템에 적용되는 속성들을 알아보자. 정해진 비율만큼 크기를 늘려, 여백 채우기 : flex-grow display: flex에 적용된 것을 보면, 여백이 채워지지 않는 모습을 볼 수 있다. 이는 flex-grow의 기본 값이 0이기 때문이다. 만약 다음과 같이 아이템 박스 1에 flex-grow: 1을 지정하면, 나머지 여백의 100% 비율에 맞춰 크기를 늘리는 모습을 볼 수 있다. 이 상태에서 아이템 박스 2에 flex-grow: 1을 지정하면, 나머지 여백의 박스1과 박스2가 각각 1:1의 비율로 크기를 늘리는 모습을 볼 수 있다. See the Pen KKzePBg by joonho lee .. Web/CSS 2020. 9. 15.

• 

  [CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들 반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-con.. Web/CSS 2020. 9. 14.

• 

  [CSS] display : inline, block, inline-block 에 대해서 알아보자 웹 페이지 클론 작업을 하다보니, CSS 레이아웃에 대한 이해가 낮다는 걸 스스로 알 수 있었다. 밀접하게 관련이 있는 display에 대해 명확하게 설명하지 못하고, 그저 활용할 줄만 알고 있었기 때문이다. 각설하고, 세 요소들 간의 관계에 대해서 자세히 알아보자. 1. display란? [HTML] 인라인 요소(inline element)와 블록 요소(block element)에 대한 친절한 설명 먼저 display에 대해서 알기 전에, 인라인 요소와 블록 요소가 각각 무엇이며, 어떤 관계인지 알지 못한다면 필자가 쓴 다음 글을 참고하자. Display 속성과 각각의 요소들은 밀접한 관계를 갖고 있기 때문이다. display 속성을 통해 레이아웃에 HTML의 요소가 블록과 인라인 요소 중 어느 쪽으로.. Web/CSS 2020. 9. 11.

• 

  [WEB] 왜 웹 페이지를 반응형으로 디자인 해야 할까? 우리는 지금 디바이스의 세계 속에서 살고 있다. 필자만 하더라도 아이폰과 아이패드, 태블릿, 랩탑/듀얼모니터 그리고 웨어러블 디바이스까지. 총 6개의 화면을 보며 생활하고 있다. HTML-CSS를 공부하면서 알게 된 사실이 한가지 있는데, 바로 우리가 모바일 디바이스로 웹사이트를 쉽게 볼 수 있는 까닭은 해당 웹사이트가 반응형으로 구성되어 있기 때문이란 사실이다. (네이버와 같이 적응형 웹사이트도 있긴 하다.) 이처럼 모바일에서 보았을 때와 데스크탑에서 보았을 때, 사이트 레이아웃은 서로 다르다. 만약 내가 모바일에서 데스크탑의 레이아웃이 그대로 적용된 화면을 봤다면, '나이키 에어 베이퍼맥스 2020 FK'를 구매하는 일은 없었을 것이다. 많은 회사에서 자신들의 웹사이트를 반응형으로 제작하는 이유도, .. Language 2020. 9. 10.

• 

  [CSS] Position : fixed를 활용하여, 메뉴바를 화면 상단에 고정시키는 방법 서론 윅스의 고객센터 홈페이지 웹페이지들을 살펴보다 보면, 다음과 같이 페이지의 상단에 메뉴 바가 고정된 형태의 웹페이지들이 종종 있다. 이는 홈페이지를 보는 사용자에게도 분명 큰 이점을 주는 듯 하다. 스크롤을 내려도, 메뉴바가 보이기 때문에, 자신이 원하는 영역으로 빠르게 이동할 수 있기 때문이다. 어떻게 하면, 메뉴바를 고정할 수 있을까? CSS의 Position : fixed를 활용하면 됩니다. 참고로 position:fixed는 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킵니다. 그래서 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)됩니다. 본론 fixed 속성은.. Web/CSS 2020. 9. 10.

• 

  (TIR+1) 그림으로 배우는 HTTP & Network 1. HTTP의 상태코드는 서버로부터 리퀘스트 결과를 전달한다. 200번대 리스폰스는 리퀘스트가 정상으로 처리되었음을 나타낸다. 200(OK), 204(No Content, 클라이언트에서 서버에 정보를 보내는 것으로 족하고, 클라이언트에 대해서 새로운 정보를 보낼 필요가 없을 때 사용), 206(Partial Content, Range에 의해서 범위가 지정된 리퀘스트에 의해서 서버가 부분적 GET 리퀘스트를 받았음을 나타냄). 2. 여러 데이터를 보내기 위해 MIME(multipurpose internet mail extension)으로 불리는 메일일로, 텍스트나 영상, 이미지와 같은 여러 다른 데이터를 다루기 위한 기능을 사용하고 있다. HTTP도 멀티파트에 대응하고 있어 하나의 메시지 바디 내부에 엔.. CS/Network 2020. 9. 2.

• 

  [웹 기본지식] 구글 개발자 도구를 통해 알아보는 기초 HTTP 지식 1) HTTP이란? 클라이언트 측의 request와 클라이언트측의 요청에 대한 response를 가능하게 만드는 공통의 규칙이며, 인터넷 프로토콜이라고도 말한다. 해당 파일이 어떻게 전송되고 있는지에 관하여 자세히 살펴보면, 곧 Request와 Response로 나누는 것을 알 수 있다. 2) Requset Method란? Get과 Post가 있다. Get은 주소를 가져오는 것이며, Post는 주소를 보낼 때 사용한다. 이 경우에는, my.html이라는 파일을 서버 측으로부터 가져왔으므로 Get 방식이 되는 것이다. 3) Status Code란? 정해진 규칙이다. HTTP 응답 상태 코드 번호가 200이면 "요청이 성공적으로 되었습니다"라는 뜻을 의미한다. 또한 대표적인 상태코드는 404이다. 이는 "서.. CS/Network 2020. 8. 11.

• 

  [동기부여] 마크주커버그의 하버드 졸업 연설문 영어 전문 : https://www.facebook.com/notes/mark-zuckerberg/harvard-commencement-2017/10154853758606634/ 한글 번역본 전문 : https://steemit.com/kr/@sanghkaang/2017 영상 전문 : https://youtu.be/BmYv8XGl-YU 1) 저는 오늘 목적(Purpose)에 대해 얘기하고자 합니다. 하지만 목적을 찾으라는 식의 평범한 연설을 하려는 것이 아닙니다. 밀레니얼 세대인 우리는 직관적으로 목적을 찾죠. 저는 단지 목적을 찾는 것에만 그치면 안된다는 말씀을 드리려고 합니다. 모든 사람이 목적을 갖는 세상을 만드는 게 우리 세대의 도전 과제입니다. 2) 목적이라 함은 우리가 우리 자신보다 위대한 무.. 취ㆍ창업ㆍ투자ㆍ칼럼ㆍ멘토링/창업 2020. 6. 14.

• 

  [WEB] 개인 노트북으로 웹 서버를 운영할 순 없을까? HTML로, 개인 웹 페이지를 만들면서 문득 이런 생각이 들었다. 개인 노트북으로 웹 서버를 운영할 순 없을까? 결론적으론 가능하다, 그러나 24시간 켜둬야하므로 전기세가 많이 들 것이며, 가정용 인터넷에 들어오는 변동 IP 주소로는 이용이 어렵다고 한다. 이를 가능하게 하려면, '포트포워딩' 해야 한다. 포트포워딩이란? 컴퓨터 네트워크에서 패킷이 라우터나 방화벽과 같은 네트워크 게이트웨이를 가로지르는 동안 하나의 IP 주소와 포트 번호 결합의 통신 요청을 다른 곳으로 넘겨주는 네트워크 주소 변환(NAT)의 응용이다. 이 기법은 게이트웨이(외부망)의 반대쪽에 위치한 보호/내부망에 상주하는 호스트에 대한 서비스를 생성하기 위해 흔히 사용되며, 통신하는 목적지 IP 주소와 포트 번호를 내부 호스트에 다시 매.. Language 2020. 6. 7.