HTML (5) 썸네일형 리스트형 [IntelliJ] html 서버 재시작 없이 변경 파일 실행 : spring-boot-devtools 라이브러리 추가하면 html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경 가능 # build.gradle dependencies에 spring-boot-devtools 추가 서버 재시작 없이 Build - Recompile 만으로도 변경된 파일 확인 가능 dependencies { implementation 'org.springframework.boot:spring-boot-devtools' } [WEB] CSS Selector CSS SelectorHTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법 ∎ tag로 지정하기12345 span { color : red; }cs ∎ id로 지정하기123456789 #spanId { color : red; } Hello World! Colored by Color Scriptercs ∎ class로 지정하기123456789 #spanClass { color : red; } Hello World! Colored by Color Scriptercs CSS Selector의 다양한 활용∎ id, class 속성을 요소 선택자와 함께 활용123456span#mySpanId { color : red;}div.myDivClass { color : green;}cs ∎.. [WEB] CSS 선택자 우선순위 CSS 상속상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.ex) width, height, margin, padding, border 선택자 우선순위(CSS Specificity, Cascading Order) ∎ 선언 방식에 따른 차이123456span { color : red;}span { color : blue;}cs같은 선택자라면 나중에 선언한 것이 적용된다. => blue 123456body > span { color : red;}span { color : blue;}cs선택자의 표현이.. [WEB] CSS 선언방법 및 적용방법 CSS 선언방법123span { color: red;}csspan : selector(선택자)color : propertyred : value CSS를 HTML에 적용하는 방법∎ inline HTML 태그 안에다가 넣는 방법으로, 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다.1cs ∎ internal style 태그로 지정하는 방법으로 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 브라우저가 요청을 보낼 필요가 없다.1234567891011121314 p { font-size: 2em; border: 1px solid gray; color: red; } Hello CSS cs ∎ external 외부파일(.css)로.. [WEB] HTML 기초(id, class, data 속성) id 속성고유한 속성으로, 한 HTML문서에 하나만 사용가능하다. (여러 개를 사용해도 에러가 나지는 않는다.)고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다. class 속성하나의 HTML 문서 안에 중복해서 사용가능하다.하나의 태그에 여러 개의 다른 class를 공백을 기준으로 나열할 수 있다.홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class의 사용이 필수적이다. data 속성tag에 추가적인 데이터 정보를 표현하기 위해 사용한다. 참고자료https://www.edwith.org/ 이전 1 다음