반응형 web/HTML&CSS10 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. HTML에 구글 웹 폰트/웹 아이콘 사용하기. 구글에선 웹폰트, 웹아이콘 서비스를 제공하고 있다. 링크만으로 폰트를 사용할 수 있으므로써 우리는 보다 편리하게 홈페이지의 가독성을 높일 타이포그래피를 찾을 수있다. (물론 인터넷이 연결되어야 폰트가 지정됨) 일반적으로 한 페이지당 웹폰트 연결은 3개 이하로 적용하는 것이 적당하다. 너무 많은 웹 폰트의 연결은 사이트의 로딩 속도에 영향을 미칠 수 있기 때문. 많은 폰트를 사용하면 폰트가 무거워지므로 제목/ 본문/ 강조에 쓰이는 3개지가 적당하다. 컬러도 마찬가지다. 웹 폰트를 html에 적용시키는 방법은 다음과 같다. 1.아래 링크에 접속합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open thr.. 2020. 3. 27. [CSS]transform(3D변형)효과 주기 perspective: 원근감 설정하기 perspective: 원근감 수치; perspective 수치가 낮을 수록 왜곡이 커지고 수치가 클수록 왜곡이 작아진다. perspective 는 자식요소에 효과에 넣고싶을 때 부모에 속성시켜야한다. (3D 변형을 한 요소의 부모태그에 설정 해주는 것이 일반적입니다.) translateZ : z축으로 이동하기 transform: translate(이동거리); translateZ는 3D 공간에서의 z축, 즉 사용자가 브라우저를 바라보는 시점으로 기준으로 앞 또는 뒤로 움직입니다. 마이너스(-) 값은 사용자 시점을 기준으로 뒤쪽으로, 플러스(+) 값은 사용자 쪽으로 가깝게 이동합니다. rotateX, rotateY : 3D 공간상에서 x축과 y축기준으로 회전하기 tr.. 2020. 3. 27. 이전 1 2 다음 반응형
