반응형 html7 html emmet(에멧) 문법 vscode에서 기본지원 플러그인 tap키를 통해 사용ul.list-product>li.product-$*4 ul.list-product: class="list-product"를 가진 ul 요소를 생성>: 자식 요소를 생성할 때 사용li.product-$: class="product-1", class="product-2", class="product-3", class="product-4"와 같은 li 요소를 생성$는 숫자를 1부터 시작하여 순서대로 붙임*4: 이 구조를 4번 반복 라는 의미 2024. 9. 11. [html]meta 태그 html 파일의 순서를 보면 DOCTYPE, lang을 설정한 다음 meta 요소가 나오는데 meta 데이터는 html문서에 대한 정보를 나타낸다. 즉, html 파일에 정보를 부여하는 것. 페이지에는 표시되지 않지만 커뮤터 구문 분석이 가능하며 항상 먼저 meta 태그의 charset 속성은 HTML 문서의 문자 인코딩을 지정한다. 값은 "UTF-8" , "ISO-8859-1", "EUC-KR" 이 있고 각각의 뜻은 아래와 같다. - "UTF-8" : 유니 코드 문자 인코딩 - "ISO-8859-1" : 라틴알파벳 문자 인코딩 - "EUC-KR" : 한글 문자 인코딩 다음은 meta 태그의 name 속성이다. name 속성은 메타 데이터의 이름을 지정한다. 그리고 content로 그 내용을 담는다. a.. 2021. 11. 9. [HTML/CSS]:hover로 transition 효과주기 CSS의 transition을 이용해서 마우스를 이미지에 hover 할 때 원형 효과 주는 것을 연습해 보았다. 우선 html에서 배경을 넣을 영역과 텍스트를 넣을 영역을 만들어준다. 텍스트 영역 안에는 큰글씨와 작은 글씨로 나눌 거라 h1태그와 span태그를 사용했다. [html] Tree by Gayouni html은 여기서 끝! 간단하게 만들어볼거라 원 하나만 만들었다. 다음 css에서 배경을 원형으로 바꿔줄 것이다. [css] div.circle { width: 200px; height: 200px; border-radius: 50%; margin: 20px 30px; position: relative; box-shadow: inset 0 0 0 16px rgba(207, 207, 207, 0.6.. 2020. 4. 1. HTML 하이퍼링크 오늘은 홈페이지에서 버튼을 누르면 다른페이지로 넘어가는 하이퍼링크를 실습 해보았다. 앞서 태그를 사용하여 href 속성에 url을 입력하는 것은 동일하다. 해당 하이퍼링크에 이동시킬 페이지의 .html 파일을 입력하는 것이 핵심이다. 텍스트에 태그로 링크를 걸어준뒤 href에 이동시키고싶은 html 파일을 삽입하면 해당 페이지로 이동한다. target 속성을 이용하면 페이지를 새로 만들어서 열기가 가능하고, 생략한다면, 기존페이지에서 링크클릭시 페이지가 이동된다. HTML5 HTML5 CSS3 javascript 결과 2020. 3. 30. [CSS]표 병합엔 border-collapse, 스크롤 생성할 땐 overflow 1) border-collapse collapse는 붕괴라는 뜻으로 할고있는데 아마 보더라인을 병합하는게 기존 보더라인을 합침으로써 없어지니까 collapse라고 하는지 모르겠다. border-dollapse:separate;는 기본값이므로 알고만 있자. border 분리 1 2 3 4 5 6 7 8 border 병합 1 2 3 4 5 6 7 8 결과 기본 값인 분리 모델을 보면 각 셀의 보더마다 라인이들어가있다. 하지만 border-collapse:collapse;를 사용하면 깔끔하게 합쳐진 모습이된다. 2)overflow 속성 overflow 속성에는 hidden, scroll, auto, visible 등이 있다. overflow:hidden; 콘텐츠의 내용이 박스의 크기를 넘어가는 경우 박스의 크.. 2020. 3. 20. HTML 태그: 기본태그/table 태그 기본 태그 ~태그 -~태그는 html 문서 내 제목을 정의하는데 사용한다. -숫자 순으로 중요 순이다. -제목요소는 블록 요소를 포함 할 수 없으며 인라인 요소와 텍스트만을 포함 할 수 있다. -총 6번까지 밖에없다.(, 은 없다.!) Heading(제목 계층) 1 Heading(제목 계층) 2 Heading(제목 계층) 3 Heading(제목 계층) 4 Heading(제목 계층) 5 Heading(제목 계층) 6 결과 태그 -태그는 단락을 정의한다. -브라우저는 각 요소 앞뒤에 약간의 공백(여백)을 자동으로 추가한다, -여백은 CSS를 사용하여(여백 속성을 사용)수정한다. -단락 요소 안에는 , 등 인라인 요소와 텍스트만이 포함 할 수 있으며 블록 요소는 사용할 수 없다. 단락 요소 텍스트를 단락으로 .. 2020. 3. 17. 이전 1 2 다음 반응형
