코딩공부/HTML,CSS,JavaScript
CSS_z-index
z-index란? 겹쳐지는 요소들의 쌓이는 순서를 결정하는것! 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치하게 됨 예시를 보면 직관적으로 이해 할 수 있다. HTML 코드 z-index 1번째 div 2번째 div 3번째 div 결과물
CSS
코딩공부/HTML,CSS,JavaScript
CSS_Position
Position 요소의 위치를 결정하는 방식을 설정 1.정적 위치 지정방식 -static position. 기본값 -HTML 요소의 위치를 결정하는 기본적인 방식 -단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식 2.상대 위치 지정방식 -realative position -HTML 요소의 기본 위치(✔정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 -top, left, right, bottom 속성값을 사용하여 재설정 3.고정 위치 지정방식 -fixed position -웹 페이지가 스크롤 되어도 고정위취로 지정된 요소는 항상 같은 곳에 위치 -뷰포트를 기준으로 위치를 설정하는 방식 -top, left, right, bottom 속성값을 사용할 수 있음 4.부모태그를 이용..
코딩공부/HTML,CSS,JavaScript
CSS_디스플레이
디스플레이 웹 페이지의 레이아웃을 선택하는 속성 block, inline, inline-block, none ✔visibility : hidden -> visibility :visible 숨김 , 나타내기 ●디스플레이 none -> 보이지 않고 자리도 존재하지 않는다. ●visibility: hidden -> 자리는 있는데 보이지는 않음 차이를 예시를 통해 알아보자 HTML 코드 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성을 hidden으로 설정 visibility 속성을 hidden으로 설정 none으로 설정한 값은 아예 보여지지 않지만 hidden속성으로 만든 값은 자리는 차지하는 모습을 볼 수 있다.
코딩공부/HTML,CSS,JavaScript
CSS_배경 문법
CSS배경 ●background-color -HTML 요소의 배경색을 설정 ●background-image - html 요소의 배경으로 나타날 배경 이미지를 설정 - 배경 이미지는 기본 설정으로 반복되어 나타남 background-image:url(파일경로) ●background-repeat -배경 이미지를 수평이나 수직방향으로 반복하도록 설정(repeat-x repeat-y no repeat) ●background-position -반복되지 않는 배경 이미지의 상대 위치를 설정 -%나 px을 사용해서 상대위치를 직접 설정할 수 있음 -상대 위치를 결정하는 기준은 왼쪽 상단(left top) ●background-attachment - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음 - 고정..
코딩공부/HTML,CSS,JavaScript
CSS_텍스트 문법
CSS의 텍스트 -택스트의 색상을 설정 -기본값은 검정색 ●letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 예)안녕하세요. 오늘은 화요일.. 아직도? 안 녕 하 세 요. 오 늘 은 화 요 일 . . 아 직 도 ? ●word-spacing 텍스트 내에서 단어 사이의 간격을 설정 예)안녕하세요. 오늘은 화요일.. 아직도? 안녕하세요. 오늘은 화요일.. 아직도? ●text-align 텍스트 수평 방향 정렬을 설정(left,right,center,justify) ●text-indent 단락의 첫줄의 들여쓰기를 설정 ●line-height 줄 높이를 정하는 속성 예) 글자크기가 40px 일 떄 line-height : 1.5 -> 줄높이는 40px의 1.5배인 60px -> 글자 크기는 40px..
코딩공부/HTML,CSS,JavaScript
CSS_컬러 문법
CSS 컬러 1. 색상 이름으로 표현 red,yellow,blue ...... 2.RGB 색상 값으로 표현 rgb(0~255,0~255,0~255) red green blue rgba(0~255,0~255,0~255,0~1의 소수) ALPHA 3.16진수 색상값으로 표현 #0000FF ->vkfkd 00 00 FF -> #00F R G B
코딩공부/HTML,CSS,JavaScript
CSS_가상 선택자
https://coding-diary100.tistory.com/45 CSS_ 기본 개념과 문법 CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다 coding-diary100.tistory.com 가상 선택자 - 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택 li: first-child li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용 ex) ul>li:first-child {color:deeppink;} li:last-child li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용 li:nth-chi..
코딩공부/HTML,CSS,JavaScript
CSS_속성 선택자
속성 선택자 -HTML 요소에서 src,href,style,type,id,clss.. 등 속성을 선택자로 지정해서 스타일을 적용 CSS [src] {border : 3px solid red;} [src ='apple.png']{width: 200px; height: 200px} HTMl HTML 코드 속성 선택자 https://www.naver.com" target ="_blink">네이버 속성명과 속성값이 모두 일치하는 요소를 선택자로 지정
