개발자 도담씨

1편 - [Web Programming] - CSS 속성 1편 ( 단위 + 박스 속성 ) 1편에 이어 알아볼 내용은 display속성과 배경 속성이다. 2편의 첫번째로 display속성을 살펴보겠다 😚HTML이 나오면서 display속성에 입력할 수 있는 다양한 키워드가 등장했지만모든 display속성을 제대로 지원하는 웹 브라우저는 아직 없다고 한다. display속성을 알아보기에 앞서 이전에 등장했던 친구 중 공간 분할 태그 를 기억하고 있으면 좋겠다.div는 블록 형식, span태그는 인라인 형식으로 알고 있을 것이다.우리는 display속성을 이용해 div와 span같이 인라인, 블록, 인라인-블록 형식을 설정할 수 있다. 예) display: 키워드 명; 여기서 인라인-블록 형식 의 차이가 무엇..

스타일 속성을 적용 하기에 앞어서 먼저 스타일 값으로 입력할 수 있는 CSS의 단위부터 알아 보려고 한다.스타일 값으로 입력할 수 있는 단위에는 키워드, 크기, 색상, URL 등이 있다.이 친구들을 차례대로 살펴 보겠다 😳 첫번째로 키워드 단위는 W3C에서 미리 정의한 단어로, 키워드를 스타일 값으로 입력하면키워드에 해당하는 스타일이 자동으로 적용이 된다. 자동 완성 기능을 통해 서비스 해주고 있다. 두번째, 크기 단위이다. 표 외에도 cm, mm, inch 단위 등이 있지만 주로 아래와 같은 단위를 사용한다.( 개인적으로는 픽셀과 백분율 단위를 많이 사용하는 것 같다 ! )배수단위는 유용하나 많은 사람들이 사용하지 못하는 단위라고 한다.어렵게 생각할 것 없이 배수를 나타내는 것이다. 1배 = 1em =..

CSS ( Cascating Style Sheets )의 약자로HTML 을 꾸밀때 사용하는 스타일 시트 언어다. 위와 같은 코드를 CSS 블록이라고 한다. 이번 챕터에서는 CSS 선택자에 대해 나오는데 이 선택자는 스타일 시트 뿐만 아니라 자바스크립트에서도 사용된다. 선택자 종류선택자 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #header 클래스 선택자 .클래스 .item 속성 선택자 선택자 [ 속성 = 값 ] input [ type = text ] 선택자 [ 속성 ~= 값 ] div [ data - role ~= row ] 선택자 [ 속성 |= 값 ] div [ data - role |= row ] 선택자 [ 속성 ^= 값 ] div [ data - role ^=..

웹 페이지는 스타일 시트를 사용해 스타일을 적용한다. 우리는 다음과 같은 두가지 방법으로 스타일시트를 적용할 수 있다 ! " 내부 스타일시트 " 말그대로 HTML의 내부에 작성된다. style 태그를 통해 직접 입력한다. 12345678910 cs " 외부 스타일시트 "간단한 짧은 스타일 시트라면 내부에 입력을 해줘도 괜찮지만규모가 큰 작업에서는 HTML과 스타일 시트를 따로 분리해서 사용합니다. 외부 스타일 시트는 스타일시트를 별도로 생성하고 link 태그의 href 속성을 이용해HTML 페이지로 불러옵니다. 파일명.css 의 스타일 시트를 하나 만든 후 1234h1 { color: white; background: green;}cs HTML에 불러와 줍니다.이때 내부 스타일시트와는 다르게 태그를 사용..

입력 양식은 사용자에게 정보를 입력받는 공간을 말하며 입력 양식 태그를 사용해 만듭니다.일반적으로 서버에서 클라이언트로 데이터가 전달 됩니다. 하지만 회원가입과 로그인, 검색과 관련된 버튼을 클릭하는 순간에는 클라이언트가 서버로 데이터를 보내야 합니다.입력 양식을 사용하는 것은 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법입니다. 1. 입력 양식 태그 1.1 속성1.1.1 전송 위치 ( 데이터 전달 목적지 ) : action1.1.2 전송 방식 : method1.1.2.1 주소에 데이터를 직접 입력해 전달 : GET1.1.2.2 별도의 방법을 사용해 데이터를 해당 주소로 전달 : POST1.2 사용자 입력 부분 > ( 인라인 태그 )1.2.1 글자 입력 양식 : text1.2.2 버튼 : but..

1. 오디오 태그 ( 시작 태그, 끝 태그 모두 사용 ) 1.1 속성1.1.1 음악 파일의 경로 지정 : src1.1.2 음악을 재생하기 전에 데이터를 모두 불러올지 여부 지정 : preload1.1.3 음악의 자동 재생 여부 지정 : autoplay1.1.4 음악의 반복 여부 지정 : loop1.1.5 음악 재생 도구 출력 여부 지정 : controls1.2 웹 브라우저별 지원 가능 오디오 파일 형식: 웹 브라우저 별로 지원하는 음악 파일 형식이 다 다르다.1.2.1 source: audio 태그의 src 대신 내부에 입력한다.: : : m..

1. 글자 태그1.1 제목 글자 태그 ~ 1.2 특수 문자1.2.1 공백 1.2.2 >1.2.4 & &1.3 본문 글자 태그 1.4 개행 태그 1.5 수평 줄 태그 1.6 하이퍼링크 태그 : Anchor ( 닻 ) 출력 글자 1.6.1 절대 경로 1.6.2 상대 경로1.6.3 아이디 경로 : 현재 웹 페이지 내부의 태그 id ( #name - id속성이 name인 태그로 이동 )1.6.4 메일 경로 : mailto : 이메일 주소 - 해당 주소로 메일 전송1.6.5 새 창으로 띄우기 : target = "_blank"1.7 글자 모양 태그1.7.1 굵은 글자 태그 1.7.2 기울어진 글자 태그 1.7.3 작은 글자 태그 1.7.3 아래 첨자 태그 1.7.4 위 첨자 태그 1.7.5 밑줄 글자 태그 1.7..

# Tag #Element # Attribute# Element ( 요소 ) : HTML 페이지에 존재 하는 것 # Tag ( 태그 ) : 요소를 만들 때 사용하는 기호 # Attribute ( 속성 ) : 태그에 추가 정보 부여 태그 : 파랑, 속성 : 빨강HTML 페이지 기본 구조 HTML Basic Page : 웹 브라우저에 HTML5문서임을 알려줌 : 루트 요소, 모든 html 태그는 html 태그의 내부에 작성 lang 속성은 웹 페이지 탐색 시 해당 웹페이지가 어떠한 언어로 만들어져 있는지 쉽게 인식 하기 위함. & : 사용자에게 보여지는 부분 에는 해당 태그만 사용 가능 : 브라우저 제목 지정 태그

WWW ( World Wide Web ) : 인터넷에 연결된 컴퓨터를 통해 사람들이 저오를 공유할 수 있는 정보 공간 # 인터넷 : 전 세계를 연결하고 있는 국제 정보 통신망 # 웹 : 인터넷에서 작동하는 서비스 처음의 웹은 유럽 공동 원자핵 연구소의 팀 버너스리가 개발했다고 한다. 뜬끔없이 왠 원자핵 연구소? 라고 생각 했더니 하이퍼링크라는 특수한 기능을 사용하여 인터넷 공간에서 문서와 문서 사이를 이동할 수 있도록 하기 위해서 만들었다 한다. 이러한 웹 브라우저가 인기를 끌자 관심이 쏠리면서 경쟁이 일어 났다. 경쟁을 하는 동안 웹은 엄청난 속도로 발전했지만 이에 대응하는 웹 표준이 없었다. 따라서 웹 브라우저와 연동되는 특정 프로그램을 설치해 기능을 확장하는 플러그인이 등장했다. 웹은 클라이언트와 ..