영최의 개발켈로그

#03_css_work.html 인라인 방식 내장 방식 링크 방식 import방식 내장방식 사용 #03_import.css span { background-color: orange; color: blue; } #03_link.css @import url(./03_import.css); p { background-color: red; color: white; } h3 { background-color: black; color: white; } 직접 css 참조 방식 import 방식을 포함한 4가지를 적용시켜보았다. 실제로 구현해보면서 참조의 우선순위를 확인할 수 있었다. css는 복잡한 코드를 더 간단하게 확인할 수 있게 해주는 것 같다.

CSS(Cascading style sheet)란? : 웹페이지를 디자인하기 위해 사용하는 언어 ● 개발자 도구의 역할? + 웹페이지에서 개발자 도구 확인 방법(맥: option+cmd+i , 윈도우:f12) - 브라우저에서 개발 편의를 위해 제공되는 도구 - 지금 보고 있는 웹페이지의 HTML. CSS. Javascript 등을 볼 수 있음 - 해당 코드를 수정가능 - 특정 요소 코드 확인/ 크기 조정/ 모바일 버전 확인 모두 가능 ● HTML5에서의 스타일 적용 -HTML5 이전 버전에서는 HTML 자체에서 Style을 컨트롤 할 수 있는 태그인 ,등을 사용하였으나 HTML은 '텍스트를 전달하는 문서'이자 '문서의 구조'이므로 즉 본연의 기능이 아닌 디자인 적 요소가 추가되면서 많은 혼란이 야기 되었..

HTML을 Sementic하게 작성해야하는 이유는? ● HTML을 Sementic하게 작성한다는 것의 의미는? : 웹 페이지를 이루는 요소에 '의미와 맞는 태그'를 사용한다는 뜻 ● Sementic tag의 예시? - : 로고, 메뉴아이템 등 - : 다른 곳으로 이동 가능한 링크들 - : 하단 영역 - : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 예를 들면 광고 - : 콘텐츠 영역임을 표시. 한 HTML 페이지 당 한번 사용 - : 하나의 의미있는 요소, 예를 들면 기사 리스트 중 기사 한개 - ~ : 제목 - : article을 포함-그룹화 목적 ● Sementic 해야하는 이유? 1) 검색 최적화 (Search Engine Optimization, SEO): - 검색엔진은 HTML 코드를 분석해..

구분 음료 가격 이미지 커피류 아메리카노 4500 원 돌체라떼 4500 원 주스류 자바칩 푸라푸치노 5000 원 녹차 프라푸치노 여기서 보완해야할 부분은 내가 th를 사용하지 않고 td를 사용했다는 것이다. 또한 이부분에서 어려웠던 점은 음료 이름을 클릭했을 때 설명하는 페이지와 연동할 수 있게 만드는 부분이었는데, 이부분은 a태그를 생각해냈지만 어떻게 넣어야할지 고민하다가 td 안에 구현을 할 수 있었다. 직접 표를 완성해보니 뿌듯했다.

1 2 3 center 4 처음 실습문제를 받았을 때 당황했는데 그이유는 어디가 어떤 행,열인지 모르겠어서 당황했었다. 그러나 차근차근 행을 먼저 보고 열이 시작되는 부분에서 rowspan, colspan을 사용하니까 완성이 되었다. 또한 table의 속성인 border, cellspacing, cellpadding도 쓸 줄 알아야 표를 완성할 수 있었다.

table에 대해서 알아보자 - 표를 만들 때 사용하는 태그이다. - 과거에는 테이블을 사용하여 레이아웃을 구성하였으나, 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용한다. - 먼저 행을 쓰고 자식 요소로 칸을 넣어주는 것이 기본적인 방식이다. 1. : 표를 감싸는 태그 - border : 테두리 두께 - cellspacing : 테두리 간격 사이 너비 - cellpadding : 셀 내부 간격 - align : 테이블 정렬 속성 - width&height : 테이블의 너비와 높이 - bgcolor&bordercolor : 테이블 배경색과 테두리 색 2. : 표 내부의 행 3. : 표 내부의 제목 칸 4. : 행 내부의 일반 칸 - colspan : 해당 칸이 점유하는 열의 수 지정 -..

실습2, 설문조사 폼 작성 -태그로 설문조사 제목 -각 설문의 소제목인 '나이'와 '원하는 강의'는 태그를 이용 - 나이는 여러개의 선택지 중 하나만 선택 - 강의는 여러개 선택 가능 설문조사 이름l 이메일 나이 10대 20대 30대 40대 50대 60대 이상 원하는 강의(복수응답가능합니다.) html javascript css 여기서 잘못된 점은 id 와 for 속성에서 한글과 숫자를 시작으로 사용했다는 점을 알 수 있었다. 다음부터는 영어로 작성하고 class 속성도 영어로 작성해야하겠다. 또한 class 와 달리 id 속성은 한 html당 한개를 사용하기로 한다.

사용자 입력 Form 태그 ● 사용자 입력 Form 태그- 1. 입력 값 받기! - type: button, text, password, checkbox, radio, date, color, range, file ● 사용자 입력 Form 태그- 2. 버튼, type=“button” - 버튼을 생성 - 주로 특정 기능을 수행시킬 때 사용 ● 사용자 입력 Form 태그- 3. 텍스트, type=“text” - 텍스트 입력값을 받는 폼을 생성 - 우리가 입력하는 ID의 입력 부분 - 텍스트 값을 입력 받아 전달하는 기능 ● 사용자 입력 Form 태그- 4. 패스워드, type=“password” - 비밀번호 값을 받는 폼을 생성 - 입력 값을 자동으로 안보이게 처리 - 중요하거나 비밀 텍스트 값을 전달하는 기..