기타/HTML, CSS 기초11 기초 CSS (4) #7 박스모델 2편, margin padding 다루기 여백 여백은 상하좌우 네개의 면에 존재하는 영역이다. 1. 하위속성 정의하기 2. 여러 값을 한번에 정의하기 하위 속성 정의하기 padding-top, padding-left, padding-right, padding-bottom 과 같이 속성을 추가해줄수있다. 실습 2023. 3. 24. 기초 CSS (3) #5 display 속성 & border 속성 블록 레벨 요소 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. 인라인 요소 자기에게 필요한 만큼의 공간만 차지한다. display 속성 요소를 불록과 인라인 요소중 어느쪽으로 처리할지 정의한다. border 속성 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. 실습 블록 레벨 인라인 #6 박스모델 1편, 박스모델 소개 박스 모델 브라우저가 요소를 렌더링 할 떄, 각가의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 콘텐츠 영역 - width,height 안쪽 여백 - padding 경계선 - boeder-width 바깥쪽 여백 - margin 실습 요소의 콘텐츠 check padding, margin, border는 가질수 있지만,.. 2023. 3. 22. 기초 CSS (2) #3 CSS 선택자 1편 선택자 선택자{ 속성명:속성값; } 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 기본 선택자 1. 전체 선택자 애스터리스크(*) 모든 요소를 선택한다. *{ color: blue; } 태그 선택자 주어진 이름을 가진 요소를 선택한다. "유형 선택자" 라고도 불림 주어진 이름을 가진 요소가 다수일 경우 해당 요소들을 모두 선택한다. p{ color: blue; } 클래스 선택자 주어진 class 속성값을 가진 요소를 선택한다. 태그 선택자와 마찬가지로 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다. .을 찍어줘야한다. .text{ color: blue; } 아이디 선택자 주어진 id 속성값을 가진 요소를 .. 2023. 3. 21. 기초 CSS (1) #2 CSS 기본 문법 및 사용 방법 CSS 기본 문법 선택자{ 속성명: 속성값; } 선택자 : 어떤 요소에 스타일을 적용할지 {중괄호} : 선택한 요소에 적용할 스타일을 정의 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등) 속성값 : 어떻게 정의하고 싶은지에 대한 정보 p{ color: red; } p태그의 색을 red로 정의하겠다. 주석 /* 이 안에 작성하면 주석으로 처리된다. */ CSS 에서 주석은 다음과같이 나타낸다. HTML에 CSS를 적용하는 방법 인라인 스타일 : 태그에 직접 기술하기 스타일 태그 : 스타일 시트를 위한 태그를 추가하여 기술 문서 간의 연결 : 스타일 시트 문서를 따로 작성하여 HTML문서와 연결하기 인라인 스타일 태그에 style 속성을 추가하여 .. 2023. 3. 21. 기초 HTML(7) #13 폼(form) Part1. 서버와 클라이언트 form 태그 사용자가 입력한 테이터를 서버로 보내기 위해 사용되는 태그 서버와 클라이언트 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공한다. 클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있다. #14 폼(form) Part2. 폼 태그 form form은 입력 요소들을 감싸며, 입력값을 서버 측으로 제출 (submit) 할 수 있다. form의 내용을 제출하기 위해 input 태그의 submit 타입을 사용할 수 있다. form의 속성 action 입력값을 전송할 서버의 url method 클라이언트가 입력한 데이터를 어떤식으로 전송할지(GET ot POST) GET - 서버에 요청을 보내에 응답을 받아낸다.. 2023. 3. 21. 기초 HTML(6) #12 select 그리고 textarea select - 보기 중에 골라보자 select는 다수의 옵션을 포함할 수 있는 선택 메뉴이다. input 태그와 마찬가지로 name 태그를 지정할 수 있다. 각각의 option에는 value 속성을 지정할수 있다. (실제로 처리될 값을 나타낸다) textarea 여러줄의 일반 텍스트를 입력할수있는 입력 요소이다. text와 다르게 여러줄을 사용할수있음 실습 키우고 싶은 동물 고르기 강아지 고양이 햄스터 앵무새 기본적으로 쓰여 있는 텍스트 name,id name document.getElementsByName("name") name은 page안에서 중복되어 사용이 가능하다. action에 해당하는 페이지로 전달하는 파라미터로 사용된다. GET/POST 방식으로 .. 2023. 3. 21. 기초 HTML (5) #10 목록 표시하기 목록 목록에는 순서 있는 목록(Ordered List)과 순서 없는 목록(Unordered List)이 있다. 순서 있는 목록(Ordered List) 순서 없는 목록(Unordered List) 항목 태그는 둘다 동일하게 를 사용한다 실습 귀여운 동물 목록 강아지 고양이 두더쥐 햄스터 프로그래밍 공부 순서 HTML CSS JS NODEJS #11 입력 요소 만들기 input 사용자로부터 값을 입력 받을수 있는 필드를 나타낸다. 인라인 요소이며 단일태그이다. type(input의 속성) type값에 따라 입력요소의 형태나 입력 데이터 유형등이 달라진다. 사용가능한 type값은 20여가지이며, 기본값은 text이.. 2023. 3. 21. 기초 HTML (4) #8 컨테이너 그리고 전역 속성 컨데이너 태그 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 태그이다. ex) : 블록 레벨 컨테이너, : 인라인 컨테이너 일단 문서를 만들자 사진을출력해보자 RGB출력 운동 열심히 하기 건강을 위해 운동을 열심히 하자! 영역이 구분되는것을 볼수있다. 전역속성 전역속성은 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다. 대표적인 전역 속성들 id : 요소에 고유한 이름을 부여하는 식별자 속성 class : 요소를 그룹별로 묶을 수 있는 식별자 속성 style : 요소에 적용할 CSS 스타일을 선언하는 속성 title : 요소의 추가 정보를 제공하는 텍스.. 2023. 3. 21. 기초 HTML (3) #6 태그의 구분과 인라인 텍스트 요소 개발자 도구를 통해 블록 태그인지 인라인 태그인지 확인을 해보자. 블록레벨 요소를 만드는 태그 ex) , 인라인 요소를 만드는 태그 , 실습 제목을 표시하는 큰 텍스트! 문단을 나타내는 작은(?) 텍스트! 이 태그는 블록 요소를 만듭니다. 굵은 글자를 만들때는 strong 기우여진 글자를 만들때는 em 형광색으로 칠한 글자를 만들때는 mark h1 태그와 p 태그는 다음과 같이 블록레벨을 만든다. 반면 해당 태그들은 인라인 텍스트를 만든다. #7 이미지 표시하기 이미지 기본형태는 위와 같다. 단일 태그로 닫아주는 태그가 필요없다. src src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다. 서버.. 2023. 3. 21. 이전 1 2 다음