Jaranun 개발자 Jaranun 개발자

HTML

• 화면 설계하기 : 와이어프레임과 목업

  각종 학습 요약 2022. 4. 28. 16:54

  화면 설계하기 와이어프레임이란? 개발에 앞서 레이아웃을 그려보는 단계. 내용을 단순한 박스와 텍스트, 여러 색상 정도로 구성한다. 가장 큰 목적은 화면 각 영역을 구분하는 것이므로 이에 집중한다(디테일한 디자인이 아니다). 목업이란? 목업(Mock-up)이란 실물 크기의 모형을 뜻하는 단어다. 그럼 개발의 경우에는 어떻게 적용이 될까? 웹에서는 실제 제품과 동일하게 HTML/CSS를 작성한다. 다만 동작은 무관하므로 기능 개발을 하진 않는다.

  Read More
• 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..

  Read More
• 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; }

  Read More
• 기초 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..

  Read More