06. 폼(Form) 요소 기초 폼 요소form element란? 그 자체로는 눈에 그렇게 띄지 않지만, 텍스트 입력란, 비밀번호 입력란, 버튼 및 체크박스 등의 개별적인 form control을 품는 컨테이너container로, 아래 그림의 굵은 빨간색 테두리 부분이 폼form이라고 보면 된다. 그리고 위 그림의 분홍색 테두리 부분들은 개별적인 컨트롤control 또는 개별 입력란을 나타낸다. 그러니까 폼은, 한데 그룹화된 모든 입력란을 포함한 상자인 것이다. 또한, "작성된 폼 내용을 그룹화해서 작은 배송 레이블을 붙인 다음에 내 서버로 보내줘"와 같은 구체적인 지시까지 내릴 수 있는 요소이다. 여러 다른 입력란, 즉 폼은 요소가 감싸고 있는데, 여기서 데이터를 어떻게, 어디로 전송할지 결정하게 된다..

배경 색을 다루었던 이번 단원 마무리 문제 3가지. 문제 1. 위의 주어진 코드에 글씨 부분은 회색 배경을, 그 아래로는 주어진 배경이미지를 넣으라는 주문이었다. 웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. ↓ 이미지를 가로로 반복! repeat-x 유념하자! 사실 틀림ㅠㅠㅋㅋㅋ 문제 2. 위의 주어진 코드에 영역의 스타일을 변경하라는 주문이었다. 단, 스타일을 변경할 때 사용할 색상 표기법은 rgb! 웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를..

1. 선형 그러데이션: linear-gradient 선형 그러데이션 = 색상이 수직으로, 수평으로, 대각선 방향으로 일정하게 변하는 것. □ linear: 선으로 된, 직선 모양의 □ gradient: 경사진, 차츰 상승[하강]하는 색상이 어느 방향으로, 어떤 색상으로 바뀌는지 알려주어야 한다. 방향은 to ~~~~로 써 주며, 수평 방향은 left, right로, 수직 방향은 top, bottom으로 써 준다. 각도로도 쓸 수 있다. (방향을 오른쪽 아래, 왼쪽 위와 같이 2개를 써주면 대각선으로도 가능하다. 이 때 2개의 방향은 공백으로 구분하여 작성하되, 순서는 상관 없다.) linear-gradient(to 방향, 중지 색상1, 중지 색상2, 중지 색상3,...); 또는 linear-gradien..

이번 섹션에 포함된 강의명은 다음과 같다. (강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!) 순서 강의명 소요 시간 중요도 (필수crucial/중요important/선택nice to have) 01 HTML 테이블 개요 Introducing HTML Tables 4' 08" 중요 02 테이블 기초: , , , Tables: TR, TD & TH Elements 9' 11" 필수(어려움) 03 테이블 영역: , , Tables: Thead, Tbody & Tfoot Elements 2' 15" 중요(어려움) 04 테이블 Colspan & Rowspan Tables: Colspan & Rowspan 4' 14" 선택 (지금 단계에서는 어렵..

1. 웹 요소에 이미지 삽입: background-image 웹 요소에 배경 이미지로 넣을 파일의 경로를 url로 지정해주는 방법이다. 경로는 https://로 시작하는 절대 경로로도, 현재 웹 문서를 기준으로하는 상대 경로로도 작성할 수 있다. background-image: url('이미지 파일 경로'); 이미지 파일은 *.jpg, *.gif, *.png 파일을 사용한다. (*.확장자명 = 확장자를 가진 모든 파일을 지칭하는 기호) 요소의 크기보다 이미지의 크기가 작으면 가로로도 세로로도 이미지가 반복되어 붙는다. 예제 1. ↓ 2. 배경 이미지 반복 방법 지정: background-repeat 1번에서처럼 이미지를 가로로도 세로로도 반복할 수 있지만, 어떤 방향으로 반복할지 지정할 수도 있고, 반복..

06. 시맨틱 마크업의 개요 정의는 Do it 책을 공부하며 봤었지만, 다시 한 번 제대로 짚고 가자. ↳ 누르면 내가 예전에 썼던 포스팅인 'DAY 2. 웹 문서 구조를 만드는 시맨틱(Semantic) tag'로 연결된다. 시맨틱semantic: 의미와 관련된, 의미가 통하는 마크업markup: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어 시맨틱 마크업semantic markup: 의미 있는 마크업, 요소 내용의 의미에 관련된 마크업 뒤늦게 등장한 Semantic markup. 이것이 나타나기 전의 웹 사이트에는 안에 안에 또 처럼 무한 의 늪, 아니면 요소나 의 연과 같이 말 그대로 내용만을 담고 있는, 역할이나 사용 목적을 알 수 없는 tag들이 즐비하게 늘어서 있었다. 그러나 Sema..