AR삽질러

CSS - Flexbox 1. Flexbox - flex-direction의 디폴트는 row - inline block의 문제점을 해결하기위해 flexbox flexbox사용규칙 1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다. flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다. 2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다. 주요 Flexbox의 속성 flex-direction 주 축(main axis)를 정의한다. row row-reverse column column-reverse justify-con..

CSS - Classes, inline Block 1. lnline - inline 요소는 높이와 너비를 가질 수 없다. - padding 요소는 사방에 가질 수 있다. 위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다. hello hello line요소 - span : inline요소로 텍스트를 묶기 위해 사용 2. Class hello hello hello hello hello hello Class - .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1 - 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다. - HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다. ex) - Class..

CSS Margin, Padding, Border - (3) CSS(Cascading Style Sheets)의 margin속성은 웹 페이지 요소의 외부 여백을 조절하는데 사용된다. margin의 여백은 요소의 경계밖에 위치하며 인접한 요소와의 간격을 생성하는 역할을 한다. Margin을 이용해 웹 페이지 레이아웃의 정렬과 간격을 정의하며 스타일링한다. Margin - Margin은 요소의 경계를 넘어 그 주위에 공간을 생성하는 요소와 그 주변 요소간의 간격을 조절한다. 1.1. Margin의 값을 지정하는 방법 1) 기본구문 : margin : top, right, bottom, left 2) 단일 값지정 : 요소의 모든 방향에 동일한 크기의 마진을 적용한다. 3) 두값 : 첫번째 값은 top, bot..

CSS box - (2) - CSS의 box에는 두종류의 형태가 있다. 하나는 박스요소 옆에 다른 요소가 올 수 있고 하나는 박스요소 옆에 다른 요소가 올수없는것이다. - 요소 옆에 다른 요소가 올 수 없는것 blocks - 요소 옆에 다른 요소가 올 수 있는 것 inlines div는 요소 옆에 다른 요소가 올 수 없다. span은 요소 옆에 다른 요소가 올 수 있다. hello hello hello link도 요소 옆에 올 수 있다. hello hello hello link hello p는 div와 같이 요소 옆에 다른 요소가 올 수 없다. hello hello hello link hello 안녕하세요 HTML CSS를 활용한 프로젝트를 만들고 있습니다. img도 요소 옆에 올 수 있다. hello ..

CSS - How to Add CSS to HTML (1) 1. HTML 파일에 CSS 코드를 넣는방법 1-1. 같은 HTML파일에 HTML, CSS 코드는 넣는방법 - head 안에 style을 명시하려 css코드를 작성한다. 1-2. CSS와 HTML파일을 분리하는 방법 (추천) - 다른 방법 css파일을 분리하여 생성한후 link태그로 파일을 연결해준다. 2. CSS코드 작성 - CSS코드 작성 규직 3가지 1) CSS가 하는 일은 HTML태그를 가르키는 일로 첫쨰로 selector를 작성한다. 2) 어떤 태드를 가리키면 속성을 부여한다. 3) 중괄호 { } 를 사용하여 속성을 정의한다. styles.css h1{ color: red; } html The AR Profile Photo Hello!!..

HTML Form Tags - (2) https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org - body 태그 내에 있는 콘텐츠가 브라우저에 표시된다. - 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. - 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존해한다. -..

https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에 developer.mozilla.org HTML HTML(Hyper Text Markup Language)는 웹 페이지의 구조를 만드는 언어로 HTML에서는 다양한 태그를 사용해 웹페이지의 요소를 정의한다. 태그는 ""로 둘러쌓인 키워드를 구성되어 어디서부터 어디까지의 구간이 tag인지 지정할 수 있다. Tag 0. - HTM..

CSS? CSS (Cascading Style Sheets) HTML은 Browser에게 웹사이트의 Content가 무엇인지 알려주는 것이다. CSS는 Browser에게 웹사이트의 그 Content가 어떻게 보이는지 알려주는 것이다. 즉 사용자에게 문서를 보여주는 방법을 지정하는 언어로 스타일, 레이아웃, 디자인 등 전반적인 모양을 지정하고 제어한다. CSS는 웹 페이지의 내용과 구조(HTML)와 분리되어 컨텐츠와 디자인을 분리하여 코드의 유지보수와 개선을 도와준다. https://ko.wikipedia.org/wiki/CSS CSS - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어..

HTML? 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language) 웹 페이지를 만들기 위한 표준 마크업 언어로 HTML은 웹 브라우저가 이해하고 해석할 수 있는 텍스트 기반의 코드로 작성되며 웹페이지의 구조와 콘텐츠를 정의하는데 사용된다. https://ko.wikipedia.org/wiki/HTML HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 ko.wikipedia.org HTML 구성 요소 Tage 태그는 각 요소의 시작과 끝은 표시하며 요소의 종류와 특성을 정..