프론트엔드/html (10) 썸네일형 리스트형 선택자 - 가상 클래스 Focus 만약 Focus 설정을 css에서 적용했는데 적용이 되지않는다면, 이는 그 태그가 Focus가 되지않는 속성이어서 그럴수도 있는데요, 가 예시입니다. 그럼 이를 라는 속성을 추가하여 focus가 적용이 되게 만들 수도 있습니다. 전역 속성 전역 속성이라하믄... !! 모든 태그에 쓸 수 있는 html의 속성을 이야기한다 무엇이 있나?? title style class id data-원하는이름="데이터" 팁 data- 에 관하여 우리가 만약 다른 파일에서의 자바스크립트에서 html안의 데이터를 확인하고자할 떄는, html의 script태그에 defer를 사용하면 html을 전부 읽어서 가져온다 class, id 차이 class= 중복 가능하다! id = 중복을 허용하지 않는다! 우리가 css에서 어떠한 변화를 준다고 가정했을 때 (주로 예쁘게 꾸미는 거겠죠?) 주로 클래스나 id , 태그를 이용해서 많이들 접근하는데, 그때 활용하실 수 있습니다. 그렇다면 css에서는 어떻게 접근해야할까요?? 먼저 클래스. 위와 같이 클래스로 구분을 우선해주고, . 을 찍어서 접근해줍니다. 그럼 id는??? 역시 이렇게 id를 주고나서, #을 이용해서 css에서 접근해주시면 됩니다. 수고---!! 글자와 상자 인라인 : 글자를 만들기 위한 요소 인라인 요소는 하나의 글자처럼 취급한다는 것을 기억 또한 글자는 가로 사이즈와 세로 사이즈를 가질 수 없다 span 태그는 안에 style을 지정할 수도 있다. height, width, margin(외부 여백), padding(내부 여백) 기본적으로 글자 안에 상자는 안된다. src, alt는 필수 속성 target은 주소를 클릭 시 새 탭을 열리게하는 기능 블럭 : 레이아웃을 만들기 위한 요소 순서가 필요없는 목록 자식으로 반드시 태그 가지고 있어야 함 인라인 블럭 요소 : disabled는 화면에 인풋은 나오고 입력은 안되게 checked 미리 박스에 체크가 되어서 나오게 name 속성을 이용해서 같은 이름끼리 묶어낼 수 있다. 열(column)을 지정하는 요소 .. html 기본 문법 HTML 4, 5로 넘어오면서 기존의 편리를 위해 빈 태그에는 끝에 /를 붙여주지않았지만, 조금 더 엄격한 문법인 XML이 등장하며 끝 쪽에 /를 붙여야하는 상황도 발생. ex) 결론 : 뒤 쪽에 /를 붙이는 것이 안전하다. 또한 빈 태그들은 속성과 값을 주어야한다. (예외로 줄을 바꿀 때 쓰는 br이 있는데, 이를 제외하고는 모두 속성과 값을 준다.) Tips 간단한 Tip 브라우저 스타일 초기화 : reset-css CDN 위의 사이트에서 브라우저를 초기화하는 css를 가져올 수 있다. Emmet 강력한 자동 완성 기능. HTML 작성 속도를 크게 증가시켜줌. CSS 선택자를 활용해 사용하는 기능 *기호는 곱하기 {}는 내용 삽입 $는 순서대로 숫자 입력을 의미합니다. Ex) div>ul>li*4{$} 실제 값은 위와 같이 나옵니다. 잘 활용해서 빠른 html 작성 가즈아~! 절대 경로, 상대 경로 상대 경로 ./ 생략 가능, 주변에서 찾음 ../ 상위 폴더로 올라감 절대 경로 http https는 원격 / 최상위 루트 주로 index.html이나 다른 컴포넌트 객체 등등 경로를 지정해주어야할 시기가 많을텐데, 참고하자. 이전 1 2 다음
