위치 속성 요소의 고정 위치와 상대 위치 지정 절대 위치,position:absolute left, right, top, bottom 의 프로퍼티 값으로 정하면, 이 값들은 부모(body)태그 안에서의 상태 좌표입니다. 고정 위치, position:fixed left, right, top, bottom 의 프로퍼티 값으로 뷰포트(브라우저 보이는 영역)의 특정 위치에 고정시키는 방식입니다. 정적 위치, position:static 웹 페이지가 작성된 순서대로

시험 & 자격증 & 과제폭탄 으로 인하여 포스팅을 이제야 다시 시작합니다 ! 가시 속성 태그가 화면에 보이는 방식을 지정 display 속성 (보통 태그는 블록(한 행을 다 잡아먹음) 속성을 가집니다) _에 들어오는 속성 1.none : 화면에 보이지않음 (숨김) 2.block : 블록 박스 형식으로 지정 3.inline : 인라인 박스 형식으로 지정 (옆에 내용이 올 수 있게함) => 자주 쓰임 4.inline-block` : 블록과 인라인의 중간 형태로 지정 1) none 키워드 >style 속성 # : id 선택자 . : 클래스 선택자 2) block #box태그의 display 속성을 block 키워드로 바꿈 3) di

웹프로그래밍을 수강중인데, 해당 교과목은 3시간 수업 후 20~30분 이내에 교수님이 띄워주신 것을 만들어 내야하는 수업입니다. (html -> css -> Js) 순의 커리큘럼 1 (원래는 다른 ui이나, 위에 예시는 제가 만든 것임을 참고하여 주시면 감사하겠습니다.) 조건1, 테이블 앞 부분(열)을 클릭(이벤트)시 뒷 열 text input에 입력할 수 있게끔 처리. 조건2, 나중에 db랑 연동할 예정임으로 각각의 저장소(?)를 지정하여라. 조건3, 빈칸 클릭시 색상변경 조건4, 내용 빈칸 란은 작성 크기 크게 작성할 수 있게끔 처리 조건5, box가 table의 테두리와 맞닿지 않게

css 속성 h1 { color : red; } h1 : 선택자 color : 스타일 속성 red : 스타일 값 박스 속성 csss는 각 요소가 박스라는 사각 영역을 생성함 (박스 단위로 움직임) 생성한 영역이나 영역을 둘러싼 테두리에 크기, 색상, 위치 등과 관련한 속성을 지정하여 스타일을 변경함 웹 페이지의 레이아웃을 구성할 때 가장 중요함. 박스 크기와 여백 width 와 height 속성 : 글자를 감싸는 영역의 크기를 지정함 (image 도 해당 태그 사용) border 속성 : 테두리 두께를 지정함 margin : 테두리와 다른 태그의 간격을 지정함 padding : 테두리와 안쪽 여백을 지정함 div 태그로 만든 박스 크기와 패

예제 코드 Tip. (주석 처리한 것을 우선시하여 확인해서 학습해야함) 정말 예제 2 자손선택자 특정 태그의 자손을 선택할 때 사용 형태 설명 선택자 A > 선택자 B 선택자 A의 자손인 선택자B 선택 `` 태그 요소 선택할 대 자손

클래스 선택자 ( .클래스 ) 특정한 클래스가 있는 태그를 선택하여 속성을 지정함 1. 클래스 사용자를 1개 사용하기 Document .select {color: red;} 사과 바나나 오렌지 감

선택 가능한 입력 양식 1. 한 항목만 선택하기 : `` 태그 사용 목록으로 보여 주는 항목 중 하나 또는 여러 개를 선택할 때 사용 기본적으로 하나만 선택가능 `, ` 태그를 함께 사용 2. 여러 항목 선택하기 : `` 태그의 multiple 속성 사용 3. 선택

필자는 해당 교과목을 제일 안 좋아하였으나, 교수님의 수업 진행 방식이 너무나 마음에 들어 제일 좋아하는 교과목으로 바뀌게 되었습니다. 해당 과목명은 html->css -> Js 까지 학습하는 '웹프로그래밍' 입니다. 처음에 html을 학습할 때만 해도 "어떻게 해?" 라고 하였으나, 백문이불여일타. 치다보니 어느새 교수님께서 말씀하시는 내용이 무엇인지 이해하고, 흥미를 느끼고 있습니다. 해당 과제는 수업 내용을 바탕으로 그날 배웠던 것을 마지막 30분 이내에 전부 다 스스로 풀어 제출해야하는 당일 과제입니다. 이를 저는 '타임어택 과제' 라고 부릅니다. > 해당 언어(기본기?) 를 처음 학습하기 때문에 코드로 구현할 때 보기 불편함을 느끼실 수 있음을 양해 부탁드립니다 ! 더 나은 방법이 있다면 댓글 남겨주시면 참고하여 학습하도록 하겠습니다. 1번 ![](https://velog.velcdn.com/images/ohoh7391/post/690dd863-05fd-4

기본 입력 양식 태그 input 태그의 type 속성을 이용해 다양한 기본 입력 양식 생성 라디오 버튼의 name 속성을 이용해 여러 대상 중 하나만 선택하는 형태 experience 이름 <input id="username" type="text" name="usernam

입력 양식 사용자에게 정보를 입력 받는 요소 입력 양식 개요 `` 태그 : 영역 생성 데이터 전달 방식 `` 태그는 method 속성의 방식으로 action 속성 장소에 데이터 입력 양식 종류 (1) (2) ![](https://velog.velcdn.com/image

표 제목 태그 caption 태그 표의 위쪽 중앙에 표시됨 (아래 예시에서 : 3학년 교과목) 표의 구조 지정 thead(제목), tbody(본문), tfoot(요약) 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해할 수 있다는 장점이 있습니다. 예시) 원래는 위의 예시와 같이 출력해야하나, 저는 학기별 소계를 중간정렬해서 출력하고 싶어서 태그를 td가 아닌, th를 썻으며, html을 교과목으로 추가하였습니다. <img src="https://velog.velcdn.com/images/ohoh7391/post/3387eb4d-0336-418c-a10a-8fc9f5a0a202/image.png" widt

테이블 태그 태그 설명 table 표 삽입 tr 표에 행(세로) 삽입 th 표의 제목 셀 생성 td 표의 일반 셀 생성 => 열 생성(몇 칸인지 = 가로) 시간표 만들기 표 만들기 표에 셀 추가하기 <img src="https://velog.velcdn.com/images/ohoh7391/post/3e154ca4-3fce-43e9-aab4-5d0380029dd1/i

HTML 태그 -1 HTML5에서 지원하는 기본 태그 페이지에서는 글자 태그가 비중이 큼 제목과 본문 글자 태그 문서의 제목을 표현할 때 사용 h는 Heading을 의미 본문 글자 입력 시 사용 p : paragraph br : break hr : horizontal rule 예제 3-1 제목 표현 <img src="https://velog.velcdn.com/images/oho

HTML5 기본 용어 태그와 요소 요소 - HTML 페이지를 구성하는 각 부품(제목, 본문, 이미지 등) 태그 - 요소를 만들 때 사용하는 작성 방법 생성 방법에 따른 요소 구분 속성 태그에 추가 정보를 부여할 때 사용하는 것 html 주석 코드 설명 기록 (프로그램 실행에 영향 x) html5 페이지의 구조 ![](https://velog.velcdn.com/images/ohoh739

웹 동작 웹(Web): 요청과 응답 과정 (예: 치킨 주문) URL : 웹에서 어떤 대상을 구분하는 주소 서버와 클라이언트 서버 (제공자) : 응답하는 쪽 클라이언트 (사용자) : 요청하는 쪽 웹 동작 서버 프로그램 (백엔드 프로그램) 서버에서 실행되는 프로그램 사용자와 먼 곳에 있으므로 백엔드 프로그램 클라이언트 요청에 따라 적절한 파일과 데이터 제공 자바, C#, 루비, 파이썬, 자바스크립트 웹 프레임워크(ASP.NET, JSP, PHP 등) MVC 프레임워크(ASP.NET MVC, Spring MVC, Ruby on Rails등) 비동기 프레임워크(Node.js Express, Jetty) 클라이언트 프로그램(프론트엔드 프로그램) 웹 브라우저에서 작동하는 프로그램 사용자와 가까운 곳에 있으므로 프론트엔드 프로그램 HTML, CSS, 자바스크립트로 개발