Frontend🌱/HTML, CSS

✏️id 속성 - 고유 영역 참조 1. 고유 영역 식별자 document.getElementId()를 통해 고유 영역을 참조할 수 있습니다. HTML 프론트엔드 개발 뉴스 ... 프론트엔드 개발 히어로즈 ... Copy ​ 2. Label과 input 컨트롤을 연결하기 위한 식별자 HTML 이메일 Copy ​ 3. 표와 표 설명을 연결하기 위한 식별자 HTML 표 설명(요약) 표 제목 ... Copy ✏️class 속성 - 중복 사용 1. 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자 HTML 읽기 읽기Copy 요소의 유형과 상관 없이 class="button" 설정 되면 일관된 디자인이 반영됩니다. ​ 2. 한 영역에서 여러개 정의를 허용하여 재사용이 가능한 식별자 HTML ... ... ..

먼저 HTML에서 input태그란? input태그란 form 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그 입니다. input태그는 사용자로 부터 정보를 받아들이는 용도로 사용되는데 input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용됩니다. 한마디로 예를들어 로그인폼 회원가입 폼등 여러가지 정보를 입력하는 쪽에서 많이 사용됩니다. 위 input 태그로 웹브라우저상 버튼을 만들어 보았습니다. input 태그는 닫는태그가 없으며 태그안에 type 속성과 value 속성 그리고 name 속성을 이용하여 작성 하는데 각 속성이 하는 역할은 아래와 같습니다. 1. type : 입력 태그의 유형 2. value : 입력 태그의 초기값을 말하며 사용자가 변경 가능 합니다. 3..

이 부분에서 태그의 action 속성 HTML 태그 ⇒ 정의 및 특징 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다. 문법 속성값 속성값 설명 URL 서식 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL 1. 절대 주소(absolute URL) ex) href=“http://www.tcpschool.com/target.php” 2. 상대 주소(relative URL) ex) href=“target.php” 예제 이름 : 학번 : 학과 :

웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아봅니다. ✔️BODY 요소 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다. ✔️HEADER 요소 HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. HTML LOGO 검색 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다. 과거에는 와 같이 사용했었다. 문서나 각 section, article 의 헤..

1. Heading 태그 제목 텍스트로 지정하는 태그로 크기가 크고 진하게 표시된다. 제목의 크기에 따라 ~ 까지 사용할 수 있다. 태그를 이용해서 제목 텍스트를 만든 다음 진하게 바꿔도 비슷하겠지만, 태그를 이용하는 것이 웹 표준에 적합하다. (검색 엔진에서 문서 제목을 잘 알 수 있게 한다.) ex) 2. Paragraphs 태그 단락을 나타내는 태그 ~ 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 줄 바꿈이 없는 텍스트 단락은 화면 너비를 넘어갈 경우 자동으로 아래 줄로 넘겨 표시된다. ex) - html 소스 코드 상에서 띄어 쓰기가 많이 되거나, 줄 바꿈을 위해 엔터로 위치를 조정하려고 시도 해도 한 칸씩 밖에 적용되지 않는다!! (띄어 쓰기, 줄 바..

1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 코드를 통해 살펴보도록 하겠습니다. 1 2 3 4 5 6 7 8 @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } cs 위의 CSS 코드는 애니메이션 명이 fadeOut 인 애니메이션에 0% 일 때 스타일을 opacity 를 1..

[css] 미디어 쿼리, @media query 이해하기 오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다. 미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때 유용한 구문입니다. ✔️한줄요약 : @media는 조건문 같은 느낌 !! ▶ @media 브라우저 지원 ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+ ▶ 미디어 쿼리 사용법 미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다. css 내부에 삽입하기 링크로 연결할 때 *test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다. CSS란?..

😃이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 김영희 😄중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 김영희 박철수 김영희 박철수 😁한 요소가 갖는 클래스 & 아이디의 갯수 제한 클래스(class)의 경우에는 한 요소에 여러개의 클래스명이 적용될 수 있다. 그러나 아이디(id)는 한 요소에 한 아이디만 적용이 가능하다. 글로만 설명을 하면 혼란스러울 듯 하여..