Html

CSS Library 미리 만들어진 CSS 스타일들의 모음이다. 자주 사용하는 스타일들을 class로 만들어 두어 요소에 class만 적용하면 사용할 수 있다. ex) Bootstrap, Foundation, Tailwind Bootstrap Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. getbootstrap.com 가장 유명한 CSS Library 반응형 사이트를 제작하기 위한 cla..

[문제 발생] 개발자도구를 통해 html을 보다가 수정하지 못하는 것들을 볼 수 있었다. 그렇다면 "사용자 에이전트 스타일시트'로 정말로 수정 할 방법이 없는가?"에 대해 고민해보자 사용자 에이전트 스타일시트(User agent stylesheet) 웹 브라우저가 기본적으로 제공하는 스타일 시트 웹 페이지가 특정 스타일이 적용되기 전에 적용되는 스타일 이는 브라우저가 페이지를 렌더링할 때 기본적인 스타일을 적용하여 일관된 시각적인 경험을 제공한다. 대부분의 웹 브라우저는 기본적인 HTML 요소에 대한 스타일을 정의하는 사용자 에이전트 스타일시트를 내장하고 있다. ex. 링크의 색상, 볼드체, 강조 등 [일부/예시] 사용자 에이전트 스타일시트는 브라우저가 웹 페이지를 표시하는 데 필요한 기본적인 스타일을 ..

[실습]1. 다음 이미지의 구조를 CSS를 활용하여 요소를 배치하시오.디테일은 처리하지 않고 요소들의 구조만 잡습니다. 2. 다음 천재교육 모집요강을 참고하여 일부분을 HTML파일로 만들어보시오.디테일은 처리하지 않고 요소들의 구조만 잡습니다.https://m.jobkorea.co.kr/Recruit/GI_Read/44173854 (주)천재교육 채용 - [천재교육그룹 공개채용] 각 부문별 인재 모집 | 잡코리아경력 : 신입·경력, 학력 : 초대졸↑, 급여 : 회사내규에 따름 -면접 후 결정, 마감일 : 2024.03.25m.jobkorea.co.kr [최종 완성]1. 다음 이미지의 구조를 CSS를 활용하여 요소를 배치하시오.box.html content content 이미지 2. 다음 천재교육 모집요강을..

CSS 속성 CSS 참고서 - CSS: Cascading Style Sheets | MDNCSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다.developer.mozilla.org 폰트font-size : 글꼴의 크기를 결정font-weight : 글꼴의 두께를 결정font-family : 글꼴의 종류를 결정 Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com line-height : 줄의 높이를 ..

CSS CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어이다. HTML 문서의 요소들이 브라우저 화면상에 어떻게 배치되고 디자인될지를 결정한다. 왼쪽은 순수 HTML 문서로, 문서의 구조만 짜여져 있다. 오른쪽은 CSS가 추가된 HTML 문서로, 요소들이 구조에 맞추어 배치되고, 디자인 되어있다. Cascading HTML 요소들은 중첩이 되어있는데, 상위 요소에 대해 적용한 스타일이 하위 요소에도 적용되는 것을 Cascading이라 한다. 스타일에 따라 Cascading이 되는 스타일이 있고, 되지 않는 스타일이 있다. CSS 문법 CSS를 적용하기 위해서는 스타일을 적용할 요소를 선택한다. 선택한 요소에 대해 어떤 스타일을 지정할지 key ..

Form 사용자로부터 입력을 수집하기 위한 양식을 정의할 때 사용된다. input 태그들의 조합을 통해 데이터를 입력받는다. 주요 속성으로는 action : 데이터를 전송할 서버의 URL을 지정한다. method : 데이터를 전송할 방식을 지정한다. ex) GET, POST GET방식의 경우 데이터가 URL을 통해 전달된다. 기본값. POST 방식의 경우 데이터가 HTTP Request 본문에 포함된다. input 데이터를 입력받는 요소이며, Form 태그로로 감싸져 한번에 데이터를 전달한다. 주요 속성으로는 name : 데이터는 key-value 형태로 전송되는데, key 역할을 한다. value : value 역할을 한다. type : 입력 유형을 지정한다. text : 일반 텍스트 입력 submit..

[실습] 1. 다음 이미지의 구조를 html tag로 표현해보시오. 2. 임의의 사이트의 구조를 html tag로 표현해보시오. 3. 개발자 도구를 활용하여 구조가 비슷한지 확인해보시오. [최종 완성] index.html APPAREL SHOP HOME PRODUCTS 나희의 블로그입니당 ,,, 저희집 막내는 별이고 토끼에요 11살이에요 Contact Us Username Email Send More Email Address nahee2253@naver.com Phone Number 010-0000-0000 Location 성남시 수정구 Working Hours 9am ~ 6pm • • • • 이미지

프론트엔드 프론트엔드(Frontend)는 사용자가 웹 브라우저를 통해 상호작용하는 웹 애플리케이션의 클라이언트 사이드 부분을 의미한다. 주로 사용자 경험(UX)과 사용자 인터페이스(UI)를 개발하는 데 초점을 맞추며, 웹사이트의 디자인, 레이아웃, 그리고 동작 방식을 구현한다. HTML, CSS, JavaScript로 구현한다. HTML : 화면의 내용 및 구조를 나타낸다. CSS : 화면의 구도 및 스타일을 지정한다. JavaScript : 화면에 동적인 요소를 추가하여 사용자와 상호작용할 수 있도록 한다. HTML 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 마크업 언어이다. 하이퍼텍스트(hypertext) 문서 내부에 또 다..