웹개발
-
HTML Page Layout : Flexbox로 레이아웃 잡기각종 학습 요약/Web 2022. 4. 28. 16:53
페이지 레이아웃 Flexbox로 레이아웃 잡기 display: flex 앞서 '기초 CSS의 이해 - 박스모델'에서 살펴봤듯, style 속성 display는 어떤 형식으로 보여질 건지, 박스모델의 display 방식을 결정하는 속성이다. Flex layout이란, 부모 엘리먼트의 박스모델을 display: flex로 속성값(강조한 이유가 있다, 일단 기억해두자)을 지정하고, 그 아래로 자식 엘리먼트들을 구성하는 레이아웃 구성 방식. Flex 요소(이하 '콘텐츠')들이 쌓이는 규칙 콘텐츠들은 기본적으로 수평으로 쌓인다('flex-direction의 기본값이 row다'라고 한다). 쌓는 방향(flex-direction)을 결정하는 속성값 두 가지: row, col..
-
HTML Page Layout : 화면을 나누는 방법각종 학습 요약/Web 2022. 4. 28. 16:50
페이지 레이아웃 레이아웃: 화면을 나누는 방법 HTML 구성 기본 TIP html을 작성할 때는 작성한 요소들이 위쪽으로부터 아래쪽으로, 그다음엔 왼쪽으로부터 오른쪽으로 쌓여간다고 생각하면 작업이 수월하다. CSS style 작업을 하기 전 가장 먼저 해야할 일 : 레이아웃 리셋 HTML 문서는 지금 막 생성한 것이라도 자체적인 style이 있다. 때문에 예상치 않게 여백이 생기거나 사이즈 계산이 맞지 않게 된다. 브라우저 간의 차이도 있고. 그래서 이런 차이들을 최소화 하는 style을 가장 먼저 적용하는데, 이 작업을 레이아웃 리셋이라고 한다. * { box-sizing: border-box; } body { margin:0; padding:0; }
-
기초 CSS의 이해각종 학습 요약/Web 2022. 4. 27. 17:06
*** 마크다운으로 작성한 내용을 기본 에디터로 수정하다보니 깨져보이는 곳이 있을 수 있습니다. 양해바랍니다. *** *** 문제되는 자료가 있을 시 댓글로 남겨주시면 수정하겠습니다. *** CSS 기초 CSS란? Cascading Style Sheets의 약자. 번역기 돌리면 '계단식 스타일 시트'라고 나오는데 솔직히 뭔 소린지 모르겠다. 근데 어쨌든 HTML의 시각적인 요소를 조작할 수 있는 웹 기술이다. 기본 구조 형식(스타일시트 사용 시) 오늘 배운 html/css로 그려보았다. ㅎㅎ 셀렉터는 여러 종류가 있다. 태그 셀렉터, id 셀렉터, class 셀렉터, 수많은 수도 셀렉터와 상태 셀렉터들... 태그, id, class만 알아도 기본이지만, 필요에 따라 다른 것들도 익혀보자. 여기서는 말고,..
-
기초 HTML의 이해각종 학습 요약/Web 2022. 4. 27. 15:35
HTML 기초 html이란? HyperText Markup Language의 약자. 즉, 하이퍼텍스트(웹문서)를 위한 구조화된(마크업) 언어. 기본 구조 형식 대개의 경우는 열고 닫는 태그(Tag), 표현하는 속성(Attribute), 담기는 내용(Content)으로 구성된다. 여는 태그부터 닫는 태그까지를 하나의 요소(Element)라고 한다. 중첩(ㅇㅁㅁㅇ)될 수 있다. 교차(ㅇㅁㅇㅁ)는 불가. 중첩된 경우, 바깥쪽의 요소는 '부모 노드(Parent node)', 내부의 노드는 자식 노드(Child node)라고 한다. 나란한 수준에 있는 노드는 '형제 노드(Sibling node)'라고 한다. 닫을 필요 없이 스스로 존재하는 태그들은 Empty Elements(또는 Se..
-
웹 개요 - 웹 개발, 프론트엔드와 백엔드각종 학습 요약/Web 2022. 4. 27. 15:13
웹 개발 이해 백엔드를 원하는데 왜 프론트엔드 공부가 필요해? 현재의 웹개발은 프론트엔드, 백엔드, 그리고 더 많은 직무들로 나눠지고 있다. 웹 기술이 예전처럼 단순하게 작동하지 않기 때문이다. 하지만 그말인즉, 지금 나눠져 있는 것들은 본래 전부 하나의 웹 개발 과정이었다는 의미다. 전문 영역은 나뉠 수 있다. 하지만 직무가 다르다고 해도 다 별개의 것이 아니라, 웹을 구현하는 하나의 기술 안에 있다는 점을 알아야 한다. 웹의 일부만 보고 웹을 안다고 할 수 없고, 웹을 알지 못하면 제대로 만들 수도 없다. 이것이 백엔드 엔지니어라 할지라도 프론트엔드 기본 지식을 반드시 갖춰야 하는 이유다. 추가로 네트워크, 인터넷, 웹의 구성, 브라우저의 동작 정도는 추상적으로라도 한번 훑어보면 좋은 것 같다. 넘 ..