주니코딩

13  자바스크립트와 첫 만남 자바스크립트 : HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이거나 포토 갤러리를 펼쳐 놓는 것처럼 웹 사이트 UI 부부에 많이 활용한다.자바스크립트 소스 코드가 짧을 경우 ⇒ 태그 사이에 실행할 자바스크립트 소스를 작성하면 된다. 웹 문서 안에 어디든 위치할 수 있고 여러 개 사용할 수도 있다. 자바스크립트 색 바꾸기 위 텍스트를 클릭하면 색 바뀜   웹 브라우저에서 스크립트를 해석하는 과정를 보고 이 문서가 웹 문서라는 것을 알게 된다. 과 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작한다.웹 문서에 HTML 태그의 순서와 포함 관계를 확인한다.태그 분석이 끝나면 스타일 정보를 분석한다. 확인 창 ⇒ confirm()를 사용하여 만들기 가능프롬프트 창에서..

10 CSS 고급 선택자 하위 요소에 스타일을 적용하는 하위 선택자section p {.....}section : 상위요소 p : 하위요소  하위 요소에 스타일을 적용하는 자식 선택자section > p {.....}section : 부모요소 p : 자식요소  형제 요소에 스타일을 적용하는 인접 형제 선택자h1 + p { color: blue; }h1 + p : h1의 형제인 p 요소 중 첫 번째 p 예약 방법 & 이용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전화(xxx-xxxx-xxxx)로 문의 바랍니다. 가족실(2~4인) : 60,000원/일 도미토리(4인 공용) : 25,000원/일  특정 속성이 있는 요소를 선택하는 [속성] 선택자a[href] {....

07 텍스트를 표현하는 다양한 스타일글꼴 지정 ⇒ font-family: 글꼴 크기 지정 ⇒ font-size: | | | 절대 크기 : 브라우저에서 지정한 글자 크기상대 크기 : 부모 요소의 글자 크기를 기분으로 상대적인 글자 크기를 지정크기 : 브라우저와 상관없이 글자 크기를 직접 지정백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시 키워드를 사용하여 글자 크기를 지정xx-snall   단위를 사용하여 글자 크기 지정em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정ex : 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정..

04 웹 문서에 다양한 내용 입력하기제목 : 제목 레드향 레드향 샐러드 레시피 상품 구성 텍스트 단락 만들기 : 내용줄 바꾸기 : 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다. 비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 레드향 샐러드 레시피 상품 구성❗️ 태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시 가능하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생김 ❗️ ⇒ 텍스트 단락을 만들 때는 태그를 사용해야 함. 인용 : 인용문 레드향 껍질에 붉은 빛이 돌아 레드향이..

01 웹 개발 시작하기정적 사이트 : 방문자에게 정보를 보여주기만 하는 웹 사이트동적 사이트 : 사용자에게 제공할 기능과 서비스까지 모두 담은 웹 사이트 서버(정보를 제공해 주는 쪽) : 인터넷에 연결된 컴퓨터로, 웹사이트에 접속하면 보이는 텍스트, 이미지, 동영상 등의 웹 요소와 사용자 정보, 상품 정보 등의 여러 정보가 저장됨클라이언트(정보를 요청하는 쪽) : 사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC, 스마트폰 등을 의미 프런트엔드 : 사용자 앞에 보이는 영역, 즉 웹 브라우저 화면에 보이는 것을 다룬다.백엔드 : 사용자 뒤에서 보이지 않는 영역으로, 데이터베이스를 설계하거나 데이터를 처리한다. 웹 개발의 기본 ⇒ HTML, CSS, 자바스크립트 웹 문서의 뼈대를 만드는 HTML웹..