전체 글156

• 

  [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.

• 

  [웹 개발 기록기]HTML을 통해, 개인 웹페이지 만들기 컴퓨터에 대해서 오랜시간 사용하면서, 한번도 던지지 않았던 질문을 한 것은 일주일 전이었다. 웹이란 무엇인가? 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다 - 네이버 지식백과 웹을 활용하여, 개인 웹페이지를 사용해봤던 경험은 초등학교 4학년 때가 처음이었던 것 같다. 채팅 어플리케이션인 '버디버디'를 활용하면서, 자연스레 개인 홈페이지를 갖게 되었으니 말이다. 본격적으로 활용했던 건 '싸이월드'가 나온 이후였다. 그 당시 핫했던 싸이월드를 하면서, 웹 공간 상에 나의 기록을 남길 수 있다는 사실을 어렴풋이 알게 된 것 같다. 공부만 하던 고등학교 시절을 지나, 대학교에 입학한 이후로는 instagram이나 facebook 등의 SNS를 써왔다. 이제는 명.. Web/HTML 2020. 6. 6.

• 

  실리콘벨리 평균 연봉 1위, 넷플릭스의 조직문화 [ 공지사항 ] 이 글은 넷플릭스 CEO Reed Hastings님의 글 ‘Reference Guide on our Freedom & Responsibility Culture’ 한국어로 번역해주신 ‘스마트스터디’의 팀 황석인님의 번역본을 참고하여 작성한 글입니다. (해당 글을 ‘조직’ 차원이 아닌 ‘개인’ 차원에 초점을 맞춰 글을 재구성하였음.) [ 이 글을 쓰게 된 배경 ] 실리콘벨리의 기업들은 수억원이 넘는 연봉을 주면서까지, 우수한 인재를 상시 영입하고자 한다. 필자는 그 이유를 알고 싶었고, 현재 세계에서 가장 핫한 기업 중에 '넷플릭스'의 기업문화에 대해 알아보게 되었다. 구글 인사에서 가장 독특한 부분은 채용과 외부 영입 엄청난 노력을 들인다는 것이다. 직원이 2만명이던 시절 채용 담당자만 1.. 취ㆍ창업ㆍ투자ㆍ칼럼/창업 2020. 2. 22.