오늘도 기록it

같은 요소가 여러 선언의 대상이 된 경우 어떤 css 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선 인라인 선언 1000점 css 파일 div { } 1점 div { !important;}99999999점 #color { } 100점 id태그 .color { } 10점 class 태그 *{ } 0점 전체 선택자 body 상속 점수 x 결과 !important > 인라인 style > id태그 > class태그> div 태그 > * .list li .item { } ->21점 .list li:hover { } -> 21점 hover->클래스 선택자 .box::before{ } -> 11점 ::before{ } 가상의 요소->태그 #..

기본 선택자 *{ } [전체 선택자] * 모든 요소를 선택 ul{ } [태그 선택자] 태그 이름이 ul인 요소 선택 .abc{ } [클래스 선택자] HTML class 속성의 값이 abc인 요소 선택 #abc{ } [아이디 선택자] HTML id 속성의 값이 abc인 요소 선택 복합 선택자 span.abc{ } [일치 선택자] 선택자 span와 abc를 동시에 만족하는 요소 선택 ul > .abc{ } [자식 선택자] 선택자 ul의 자식 요소 abc를 선택 div .abc { } [하위 선택자] 선택자 div의 하위 요소인 abc 선택 띄어쓰기가 선택자의 기호! .abc + li { } [인접 형제 선택자] 선택자 abc의 다음 형제 요소 li중 하나를 선택 .abc ~ li { } [일반 형제 선택자]..

내장방식 의 내용으로 스타일을 작성하는 방식 헤드요소에 작성 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식 (유지보수시 악영향) 링크 방식 링크 태그를 이용해 외부 css문서를 가져와서 연결하는 방식 import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css문서를 가져와 연결하는 방식 [직렬연결 방식] @import url("경로");

body 태그 안에서 전부 사용 가능한 전역 속성 title="설명" - 요소의 정보나 설명을 지정 해당하는 요소에 마우스를 올려두면 나온다. style="스타일" - 요소에 스타일을 지정 class="이름" - 요소를 지칭하는 중복 가능한 이름 css .class id="이름" 요소를 지칭하는 고유한 이름 css #id data-이름="데이터" - 요소에 데이터를 지정

인라인요소 -글자요소 블록요소-범위 인라인요소는 여백을 가로는 가능하나 세로는 불가능, 수평으로 쌓인다 블록요소는 둘다 가능, 한 칸씩 쌓인다. 태그 -특별한 의미가 없는 구분을 위한 요소 (division의 약자) [블록요소] 태그 - 제목을 의미하는 요소 h1~h6까지 존재 작으면 작을수록 더 중요한 제목을 정의 (heading) [블록요소] 태그 - 문장을 의미하는 요소 (paragraph) [블록요소] 태그 - 이미지를 삽입하는 요소 (image) [인라인요소] 속성 - [src="경로"] 삽입할 이미지의 경로, [alt="이름"] 삽입할 이미지 이름 필수속성 이미지 업로드 실패시 나옴 태그 - 순서가 필요없는 목록의 집합을 의미 (unordered List) [블록요소] 태그 - ul태그 안에 ..

검색창에 이렇게 검색하고 두번째에 있는 jsDelivr를 클릭해줍니다. 클릭하면 이런 창이 뜨는데 여기서 rest.min.css를 누르고 오른쪽에 복사 아이콘을 누른 후 copy html을 누르면 이러한 코드가 복사되고 태그 안에 붙여넣기 해주면 브라우저 별 초기화가 되는걸 볼 수 있습니다.

코드를 테스트 해보기 위해서 ide에서 코드를 테스트하면 구성을 해주기 위해 시간이 들기 때문에 간단하게 코드를 테스트 해보는 방법을 알아봤습니다. 주소로 들어오게 되면 이러한 창이 뜨게 되는데 왼쪽 상단에 있는 startcoding을 클릭하면 이러한 창이 나타나는데 html이라는 곳에 작성을 하면 우리가 코드를 작성하던 태그에 해당되는 내용을 작성하면 됩니다. 간단하게 코드만 작성하면 바로 원하는 결과를 보여줍니다.

-> HTML5

Raster(bitmap) [.jpeg, .gif, .png] -픽셀이 모여 만들어진 정보의 집합. -정교하고 다양한 색상을 자연스럽게 표현 -확대 축소시 계단 현상, 깨짐, 품질 저하 jpg(jpeg) -손실 압축(용량 낮음), 표현 색상도(24비트 약1600만 색상) 이미지의 품질과 용량을 쉽게 조절 가능 가장 널리 사용 png -비손실 압축(용량이 클 수 있다), 8비트(256색상) 24비트 (1600만 색상) 동시 지원, 투명도 지원, w3c 권장 포맷 gif -비손실 압축, 여러 장의 이미지를 한개의 파일에 담을 수 있다(움짤, 애니메이션) 8비트 색상만 지원 다양한 색상 표현 적합 X webp -jpg,png,gif를 모두 대체 가능한 구글이 개발한 이미지 -완벽한 손실/비손실 압축 지원 -g..

HTML html 을 클릭하면 html의 파일에 있는 text가 이라고 작성된 부분에 나타나게 됩니다. WEB HTML CSS JavaScript