HTML의 계층적 구조와 주요 태그 학습 1. HTML의 계층적 구조란 무엇인가? HTML의 계층적 구조란 웹 페이지를 구성하는 요소들이 부모-자식 관계를 통해 계층적으로 배치되는 방식을 의미한다. 이러한 구조는 HTML 문서의 가독성과 유지보수성을 높이며, 다음과 같은 원칙을 따른다: • 부모 요소(Parent): 다른 요소를 포함하는 요소를 의미한다. • 자식 요소(Child): 부모 요소 안에 포함된 요소를 의미한다. • 형제 요소(Sibling): 동일한 부모를 공유하는 요소를 의미한다. HTML 계층적 구조 예제 HTML 학습 사이트 소개 예제 HTML이란? HTML은 웹 ..

1. CSS Grid CSS Grid는 2차원 레이아웃을 지원하는 강력한 CSS 모듈이다. 이를 통해 우리는 HTML 요소를 행(row)과 열(column) 모두에서 자유롭게 배치할 수 있다. Flexbox가 단방향 레이아웃에 최적화되어 있다면, Grid는 복잡한 2차원 레이아웃을 쉽게 다룰 수 있도록 설계되었다. 쉽게 말해서 엑셀 시트!가로(열, column)와 세로(행, row)로 나누고, 그 안에 있는 칸마다 요소를 배치할 수 있는 것이다. 1. 그리드의 기본 규칙 1. 그리드 컨테이너: 그리드를 적용할 큰 틀을 만든다. • display: grid;를 사용해 활성화. 2. 그리드 아이템: 그 안에 들어갈 요소들을 배치한다. • 그리드 컨테이너 안의 모든 자식 요소가 그리드 아이템이 된다. 2. 그..

티스토리에는 이론, 실습 위주의 글을 올립니다. 🤧프로덕트 디자이너는 기획자, 개발자와 협업이 필수적이다. 아래 리스트를 참고하여 위풍당당한 프로덕트 디자이너가 되보자!프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍)프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기프로덕트 디자이너가 알아두면 좋을 개발 상식 06. CSS : 박스모델프로덕트 디자이너가 알아두..

2년차 디자이너로서 개발 지식은 알게 모르게 나를 주눅 들게 만드는 부분이었다. 좋은 기회로 부트캠프에서 프론트엔드 개발을 배우면서, 이 과정을 기록으로 남겨야겠다고 다짐했다.개인 웹사이트를 제작해본 경험은 있지만, 지금은 아주 초보적인 단계에서부터 하나씩 기록해 나가고 있다. 프로덕트 디자이너라면 개발자, 기획자와의 유연한 소통이 필수적이기 때문에, 이러한 과정을 통해 나의 이해도를 점차 높여가고 싶다.각 주제별로 순차적으로 글을 작성하고 있으니, 더 궁금한 부분이 있다면 아래 목록에서 클릭해 확인해 보길 바란다! 😽⇊⇊⇊프로덕트 디자이너가 알아두면 좋을 개발 상식 01. HTML 기본 개념프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소프로덕트 디자이너가 알아두면 좋을 개발 상..

1. HTML 문서의 기본 구조HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만드는 언어다. HTML의 기본 구조는 선언문으로 시작하며, HTML5 문서임을 나타낸다. 그 다음, , , 태그가 차례로 등장한다.: HTML 문서의 최상위 태그로, 문서의 언어를 설정하는 lang 속성을 포함한다.: 메타데이터와 제목을 포함하며, 태그에 페이지 제목을 적으면 브라우저 탭에 표시된다.: 페이지의 모든 콘텐츠가 들어가는 곳으로, 제목, 문단, 이미지, 링크 등 모든 요소가 태그 안에 포함된다.2. 텍스트와 목록 작성하기텍스트 요소를 작성할 때는 제목은 , 등의 태그를 사용하고, 일반 문단은 태그를 사용한다. 목록을 만들 때는 순서가 없는 목록과 순서가 있는 목록을 구분해..

1. 블럭 요소 (Block Element)블럭 요소는 웹 페이지에서 새로운 줄을 차지하며, 전체 가로 폭을 사용하여 레이아웃을 형성합니다.특징항상 새로운 줄에서 시작합니다. 즉, 다음 요소가 아래로 내려가고 줄 바꿈이 생깁니다.가로폭을 부모 요소의 100% 차지하므로, 화면 너비만큼 넓어집니다.width, height, margin, padding 속성을 모두 사용할 수 있습니다.대표적인 블럭 요소, ~ , , , , , , , 예시블럭 요소 1블럭 요소 2위 코드에서 는 블럭 요소로, 두 번째 는 첫 번째 요소 아래에 배치됩니다. 2. 인라인 요소 (Inline Element)인라인 요소는 새로운 줄을 만들지 않고, 내용물만큼의 가로 공간만 차지합니다.특징새로운 줄을 만들지 않고 같은 줄에 다른 인..

1. HTML의 기본 개념HTML은 HyperText Markup Language의 약자로, 웹 페이지의 기본 구조를 구성하는 언어입니다. HTML은 마크업 언어로서, 브라우저에게 각 요소의 역할을 지시하는 태그(tag)로 이루어져 있습니다.태그(Tag): HTML은 내용과 같은 형태로 요소를 정의합니다. 예를 들어 안녕하세요는 태그 안에 "안녕하세요"라는 텍스트를 담은 단락 요소입니다.요소(Element): HTML의 기본 구성 요소로, 태그를 통해 문서 내의 각 부분을 정의합니다. 각 요소는 열림 태그와 닫힘 태그로 감싸져 있습니다.2. HTML 문서의 기본 구조HTML 문서는 다음과 같은 구조로 이루어져 있습니다. Hello, World! This is my first HTML page..