박동훈
@Laeti-Park
es laetus🙂

명품 웹 프로그래밍 정리 노트 : 4. CSS3로 웹 페이지 꾸미기

CSS3는 HTML 문서의 외관을 꾸미는 언어로, 스타일 시트에 CSS로 작성된 코드를 사용한다. 스타일 시트는 <style></style> 태그, HTML 태그의 style 속성, 또는 별도 파일로 작성될 수 있다. 스타일 상속, 합치기와 오버라이딩, 셀렉터 조합, 가상 클래스 셀렉터 등의 기능을 제공하며, 색 표현, 텍스트 꾸미기, 폰트 제어 등 다양한 스타일 속성을 제공한다. CSS 표준 단위로는 em, %, px, cm, mm, in, pt, pc, deg 등이 있다. 폰트 제어 스타일 속성으로는 폰트 패밀리, 폰트 크기, 폰트 스타일, 폰트 굵기 설정 등이 있다.

2022년 07월 10일 · 13 min read

명품 웹 프로그래밍 정리 노트 : 3. HTML5 문서 구조화와 웹 폼

--> <label>선택 항목 :</label> <input list=&quot;options&quot; name=&quot;selected_option&quot;> <datalist id=&quot;options&quot;> <option value=&quot;항목 1&quot;> <option value=&quot;항목 2&quot;> <option value=&quot;항목 3&quot;> <option value=&quot;항목 4&quot;> </datalist> </form> <select></select> : 드롭다운 리스트를 만드는 태그로 <option> 태그로 여러 항목을 만든다. <form> <label>선택 항목 :</label> <select name=&quot;selected_option&quot;> <option value=&quot;항목 1&quot;>항목 1</option> <option value=&quot;항목 2&quot;>항목 2</option> <option value=&quot;항목 3&quot;>항목 3</option> <option value=&quot;항목 4&quot;>항목 4</option> </select> </form> <input type=&quot;radio&quot;> : 여러 개의 선택지 중 하나를 선택하는 라디오 버튼을 만드는 태그 <input type=&quot;checkbox&quot;> : 여러 개의 선택지 중 여러 개를 선택하는 체크박스를 만드는 태그 <form> <label>라디오 버튼 :</label> <input type=&quot;radio&quot; name=&quot;radio_option&quot; value=&quot;옵션 1&quot;>옵션 1 <input type=&quot;radio&quot; name=&quot;radio_option&quot; value=&quot;옵션 2&quot;>옵션 2 </form> <form> <label>체크박스 :</label> <input type=&quot;checkbox&quot; name=&quot;check_option1&quot; value=&quot;옵션 1&quot;>옵션 1 <input type=&quot;checkbox&quot; name=&quot;check_option2&quot; value=&quot;옵션 2&quot;>옵션 2 </form> <input type=&quot;submit&quot;> : 폼을 제출하는 버튼 <input type=&quot;reset&quot;> : 폼을 초기화하는 버튼 <form> <input type=&quot;text&quot; name=&quot;user_name&quot; placeholder=&quot;이름을 입력하세요&quot;> <input type=&quot;password&quot; name=&quot;user_password&quot; placeholder=&quot;비밀번호를 입력하세요&quot;> <input type=&quot;submit&quot; value=&quot;로그인&quot;> </form>

2022년 07월 09일 · 15 min read

명품 웹 프로그래밍 정리 노트 : 2. HTML5

HTML 페이지 <!DOCTYPE html> : HTML5 문서를 표시하는 지시어 <!--&quot;내용&quot;--> : 주석문 작성하는 부분으로 화면에 출력하지 않는다. <html>, <head>, <title>, <body> : 시작/종료 태그가 모두 존재하며, HTML5 구조를 나타내는 필수 태그 HTML 태그 구성<img src=&quot;heart.jpg&quot; width=&quot;100&quot; height=&quot;50&quot; alt=&quot;사랑합니다&quot;> <!-- img : 태그 이름 src : 속성 이름 &quot;heart.jpg&quot; : 속성 …

2022년 07월 06일 · 19 min read