Html/Css. 공부내용 정리

Html의 설명과 Html 구성요소 정리

문제

폰트 rem, emREM은 html의 폰트 기준으로 한다.예를 들어 2rem은 폰트 사이즈 2배이다.em은 부모요소의 폰트 기준으로 한다.예를 들어 부모 폰트가 4px이면 2em은 8px이 된다.적용되는 Css가 중복이라면 적용되는 태그를 가지고 와서 붙여 쓰면 된다.

<div> 속성자주 사용하는 Html 태그아무것도 입력하지 않아 내용이 없으면 높이, 넓이가 0 이여서 아무것도 안나타남내용이 들어가야 표시가 됨기본속성 : height : auto; / width : auto; = height : 0; / width : 100%

파란색은 창의 넓이에 따라 크기가 바뀜(바뀔때마다 넓이의 절반을 차지함)초록색은 창의 넓이에 따라 크기가 바뀌지 않음div는 속성 자체로 100%를 가지고 있기 때문에 빨강네모는 속성을 따로 안줘도 됨px : 화소를 의미하며 숫자를 넣으면 그 크기 만큼 고정됨(화면크기

<div> <section> <article>각각 태그의 속성은 display : block 이여서 한줄을 다 쓴다.속성을 바꾸고 싶은 태그는 inline-block으로 높이와 넓이를 조절해준다.각 태그에 중복되는 태그의 속성을 가지고 있을 경우불리되어

rgba 빨간색(R): 색상의 빨간색 강도를 나타내며, 0에서 255 사이의 값을 가진다.녹색(G): 색상의 녹색 강도를 나타내며, 역시 0에서 255 사이의 값을 가진다.파란색(B): 색상의 파란색 강도를 나타내며, 0에서 255 사이의 값을 가진다.알파(A): 색상

table은 td로 이루어져있고 td는 tr로 이루어져 있다.border : 테두리 선 종료, 색, 선 굵기 입력하면 나타남border-collapse: 선 합치기이중으로 된 선들을 합쳐줌table은 정보들을 정리하여 보기 쉽게 보여줄때 사용한다.실무에서는 잘 안쓰는

<a> : a엘리먼트/a태그다른 웹사이트에 들어갈 수 있는 링크 버튼을 만들어준다기본속성 : 파란색, 밑줄이 그여져있고 클릭하면 보라색으로 바뀜형식 : <a href = “목적지 주소” target="창 띄울 형식"> </a>href = “table은

입력되어 있는 줄 중에 일부를 링크로 만들 수 있다.

css로 a태그를 적용하면 모든 a태그들이 변경된다.태그에 안에 있는 a태그 한정으로 적용하고 싶다면 부모태그를 적고 후손선택자나 자손선택자를 사용하여 a태그만 걸수 있도록 조건을 걸어준다계층선택자 관계선택자 예시자식선택자 \>로 표시한다.예시) A>B 표시함으로써 A

문제 정답 내 풀이 선생님 풀이

text-align: 텍스트나 display:inline;/display:inline-block;의 정렬을 설정하는 속성left : 왼쪽 정렬right : 오른쪽 정렬center : 중앙정렬justify : 균등분할 그외 start ,end ,direction ,

업로드중..a태그의 영역은 inline 이기 때문에 영역에서 자동정렬할 영역이 없어서 section에서 중앙정렬 속성을 주어야함a태그의 영역의 중앙정렬이 아니다.section태그의 영역의 중앙정렬이다.section영역의 article 네모를 중앙정렬 하고 싶다면:art

문제 정답 내 풀이 선생님 풀이 핵심사항 table은 td로 이루어져있고 td는 tr로 이루어져 있다. border : 테두리 선 종료, 색, 선 굵기 입력하면 나타남 border-collapse: 선 합치기 이중으로 된 선들을 합쳐줌 table은 정보

태그 이름 셀렉터p태그의 p만 사용한다거나 div의 div태그 이름만 활용해서 css 적용할 수 있게 하는 것class 셀렉터형식 : .class 이름 class 속성이 같은 모든 태그에 적용된다.class="a b" 처럼 띄워져 있을 때는 .a.b 로 점을 찍어 이어

선택자 연습 사이트 : https://flukeout.github.io/

웹페이지를 표시하기 위해 구조(골격)를 잡는 언어조건문, 반복문, 함수 등이 없어서 언어라고 하지 않음markup language -> tag를 사용html은 컴퓨터상에서 입력된 웹페이지의 구조를 읽기 위한 것임tag는 10~15개정도만 알면 됨div, nav, art

a, span 엘리먼트는 기본적으로 display가 inline 이다.img 엘리먼트는 기본적으로 display가 inline-block 이다.inline요소에는 width, height, margin, padding 속성이 제대로 적용되지 않는다.태그들은 기본적으로

글자의 두께 주절font-weight:normal;font-weight:bold;글자의 크기 조절font-size:3rem;font-size:140px;자간조절 letter-spacing:-10px;※ 음수이면 간격이 좁혀지고 양수라면 간격이 넓어진다글자 색상color

text-align는 절대로 자신을 정렬하는게 아니라,자신이 가지고 있는 텍스트를 정렬한다.text-align 부모에 의해서 정렬이 된다.display:inline; 에 text-align의 속성 부여는 의미 없는 짓이다.display:inline; 속성은 글자화에 넓

\~~에 마우스를 올리면 이라는 뜻을 갖는다.태그뒤에 :를 사용하고 붙이며 뜻은 해당 태그에 마우스를 올리면 효과가 나타난다.div:hover = div에 마우스를 올리면 효과가 나타난다는 뜻효과를 보기 위해서는 기존에 div 태그가 활성화가 되어있어야하고 div:ho

img 이미지를 불러오는 태그 속성 src="" 를 사용해 "" 사이에 사이트 주소나, 이미지 경로를 집어넣으면 사진을 불러올 수 있다. display : inline-block; 속성을 가지고 있어서 글자화 되어 있다. 이미지를 여러개 넣으면 화면이 허락하는 한에서

block은 한줄을 다 차지한다.block 요소에 크기에 대헤 직접적으로 줄 수 있는것은width / marign-left / marign-right 으로 줄 수있다.block 요소 최대 넓이화일때 marign-left / marign-right를 주면 그 만큼의 여백

a태그에 href="" 속성을 주는 것처럼 기본 태그들 중 여는 태그에 속성을 줄 수 있다.태그에 주는 별명id=""로 시작하며 여는 태그 앞에 들어간다. \->- id가 숫자로는 안된다.한번 사용하게 되면 다른 id와 겹치게 사용해서는 안된다<div id="a"

border 속성, 테두리에 곡선을 주는 요소border-radius(왼쪽위꼭지점, 오른쪽위꼭지점, 오른쪽 아래꼭지점, 왼쪽아래꼭지점 );border-radius(왼쪽위꼭지점 오른쪽 아래꼭지점, 오른쪽위꼭지점 왼쪽아래꼭지점 );border-radius(전체);borde

마우스 커서 모양을 바꾸는 요소외우지는 말고 바꿀 수 있다는 것을 알고 활용할 것MBM 마우스 커서 사이트W3S 마우스 커서 사이트본인이 고유한 속성을 가지고 있는 것이 아니라 부모의 속성을 따라가는 속성body에 폰트 색을 주면 하위 태그들의 색도 바뀌는 그런 태그들

노말라이즈 일반화 a와 body 등 태그들에는 기본속성을 가지고 있다. 이런 기본속성이 화면을 구현할때 일관성을 해치고는 한다. 또한 브라우저마다 태그들의 스타일 차이가 있기도한다. 그래서 스타일을 일관되게 유지할 수 있도록 하기위해서 노말라이즈를 설정한다. 모든 작업

Vertical ailgn 부모의 엘리먼트에 높이 100px를 주고 자식의 엘리먼트의 높이를 100%를 주면 한 자식의 엘리먼트의 높이는 100px이 된다. 그 안에 자식들이 여러개라면 부모의 영역을 뚫고 부모의 높이를 따라간다. 또한 부모의 넓이와 높이가 유동적으로

레이아웃을 구성해주는 방식이미지나 글자화 된 태그 들을 패턴 아래 글자를 정렬하는 것을 말한다.레이아웃을 사용하여 가독성을 높이고 유저에게 편한한 웹페이지를 만들고 영역을 구분하기 위해서 사용한다.vertical-align:top;font-size:1rem; 활용하기주

html, body의 높이는 기본적으로 auto이다. html, body는 display : block; 처럼 높이를 지정해주지 않으면 높이가 나타나지 않는다.html의 높이의 기준은 창을 기준으로 한다. html>height: 100% = 창전체 / body>hei

border의 크기와 padding의 크기를 합쳐주느냐, 따로보느냐div를 만들다보면 안의 내용을 300px로 설정하고 padding과 border를 추가하고 나면 한 엘리먼트의 크기는 300px이 아니게 된다.box의 전체 크기: div크기 + padding크기 +

전체 width에 div 5개만 나타낼려고 한다. 그래서 div에 width:20%를 주었다.그리고 border를 주었다.그러자 유격이 생겨벼렸다.유격이 생긴 이유는 div옆에 있는 border가 20px씩 자리를 잡고 있고 이 길이가 width에 잡히기 때문이다.bo

한쪽은 건강보험 사이트이고 한쪽은 네이버 사이트이다두 사이트의 공통점은 내용이 중앙으로 모여져 있고 옆에 여백이 있다는 것이다.건강보험같은 경우에는 inner로 1300px를 주고 있고 네이버의 1280px로 주고 있다.(물론 저렇게 안되어 있는 사이트도 있다)그 방법

block 태그인 div에 img를 넣으면 div와 img사이에 유격이 생긴다.이 유격을 없애보자부모의 태그에 line-height:0 을 준다.지금의 유격은 div는 display:block;이고 img는 display:inline-block;이라서 생기는 유격이다.

부모의 안에 있는 태그에 margin을 주면 부모 안에서 있는 태그의 바깥 여백이 들어간다.부모안에 있는 태그에 여백을 주면 부모를 벗어나면서 주는 것이 아니라 부모 안애서 여백을 주게 된다.!codepensiyeon-kim/embed/azoQeGK?default-ta