CodeTech/HTML\CSS (29) 썸네일형 리스트형 HTML - ['data-' 속성] data-* 속성은 해당 DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성이다. 해당 웹 페이지가 독자적으로 사용하는 값이다. 해당 웹 페이지가 아닌 다른 소프트웨어에서 이러한 값을 사용한다면 목적에 부합하지 않는다. 보여야하고 접근가능해야하는 데이터는 이러한 데이터 타입으로 저장해서는 안된다. 접근 보조 기술이 없기 때문에 검색 크롤러도 해당 데이터를 크롤링 할 수 없다. 하지만 이때문에 커스텀요소와 관련된 메타데이터들에 대해서는 훌륭한 해결책이다. HTML 문법 이렇게 데이터를 담아놓을수 있다. count='3', name='doodream', weather='rain' 이라는 데이터가 담겨져 있다. JavaScript 에서 접근하기 let variable = document.getEleme.. HTML - [표준 모드와 호환 모드] W3C(World Wide Web Consortium)에서 웹표준을 지정하지 않았을 때에는 넷스케이프와 인터넷 익스플로러 용으로 웹페이지가 두가지로 나눠 작성이 되었다. 웹표준 제정당시 기존 브라우저들은 이표준형식 대로 웹 페이지들을 올바르게 묘사할 수 없었다. 그래서 두가지 형태를 제공하게 되었다. 표준 모드(standard mode), 호환 모드(quirks mode)로. 이러한 관계로 어떤모드로 렌더링 할 것인지 명시할 필요가 있어 DOCTYPE이 필요로 하게 되었고 DTD로 다양한 문서형식을 지정하여 렌더링을 지원하게 하였다. 현재는 HTML 5가 웹 표준이므로 특별한 경우가 아닌이상 모든 HTML에서 을 명시한다. 참고 developer.mozilla.org/ko/docs/Web/HTML/Qui.. HTML - [DOCTYPE] DOCTYPE(Document Type) HTML이 어떤 버전으로 작성되었는지 명시해주어 웹브라우저가 내용을 올바르게 표시할 수 있도록 해준다. 으로 선언하는데 이걸해주지 않으면 호환모드(quirks mode)로 동작한다. 호환모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다. DTD(Document Type Definition) 문서형식으로 DOCTYPE을 명시할 때 DTD를 지정해놓으면 HTML문서가 어떤 문서형식을 따르는지 알 수 있다. 문서형식으로서는 XHTML 1.1 XHTML 1.0 Strict DTD Transitional DTD Frameset DTD HTML 4.01 Strict DTD Transitional DTD Framese.. HTML\CSS Tip - 3[CSS - uppercase ] 1. CSS - uppercase text-transform: uppercase - 해당 element의 글자를 모두 대문자로 만들어준다. - 소문자나 대문자나 둘다 허용 2. 부분 지정 class - 코드 상에 다른 divider가 있을 수 있는데 open-post__members 라는 클래스가 지정된 element안에 있는 divider만 지정된다. 3. 같은 코드를 찾아서 수정하고 싶다면? alt + 클릭을 통해서 같은 부분을 지정하는 것도 있지만 같은 부분을 드래그해서 마크한다음 ctrl + D 를 여러번 눌러서 수정하고 싶은 부분을 한번에 마크할 수 있다. 4. 양옆을 자연스럽게 center로 margin을 놓고 싶다면? margin : auto 를 사용하자 5. boxsizing - boxsi.. HTML\CSS Tip - 2[Center에 놓이는 기술, Reset CSS, ColorZilla, page Ruler redux, :not[()] ] 1. Centering 여러 컨테이너들이 놓여있을때 서로의 크기 때문에 justify-content: space between으로 해도 정확하게 중간으로 가게하지 못한다. 얼추 비슷하게는 되지만 말이다. 이때 여러 컨테이너들 중 딱 한개의 요소가 정중앙에 있게 하는 기술이있다. 위와 같이 중앙 정렬이 잘안될 때는 모든 요소 width: 33%를 맞추고 해당하는 부분만 다시 중앙정렬을 해주면 완벽히 중앙에 해당요소가 간다. 시계가 갔다. 2. Reset CSS - 브라우저에 의해 기본적으로 적용되는 margin이나 기타 공백들을 없애고 - 아얘 깔끔히 모든 값이 0인 상태에서 시작하고 싶을 떄 사용한다. 구글링을 통해 파일을 찾아낸다음. meyerweb.com/eric/tools/css/reset/ CSS.. HTML\CSS Tip - 1 [코드 단축어, 아이콘사이트, index.html, fontawesome, heroicons, googlefont] index.html 대부분의 웹서버가 default로 index.html 이라는 파일을 찾아보도록 설정되어 있다. 영어에서는 index라는 말은 첫번째 라는 의미를 갖고 있으므로 visual studio html TIP 1. 기본 html 형식 - ! 누르고 난후 엔터 아래와 같이 예쁜 html파일이 찍히게 된다. link:css - 단축키로서 이후 엔터를 누르면 이렇게 바로 설정이되고, css폴더 아래에 style.css파일을 만든경우이므로 이렇게 수정만 하면 css파일과 html파일이 연동이 되었다. 계단식 html 구조를 쉽게 만들자 tag>tag>tag*숫자>tag -> a a .. .class이름>tag.class이름*숫자 2. drag image in screen 이렇게 이미지와 코드(코드와 .. CSS - 10 [media query] media query - 웹브라우저는 다양한 화면에서 실행될 수 있다. 휴대폰, 태블릿, 대화면 tv, 모니터등 다양한 화면에 맞춰 css는 화면 비율을 맞추고 바꾸고 화면을 감지 할 수 있다. - 화면을 감지하여 해당하는 화면비율로 웹브라우저를 맞춰주는 것이 media query이다. @media screen and (max-width: 400px){ } 위구문 전체가 의미하는것은 '이 스크린이 400px보다 작으면 아래를 실행 하라' 물론 @media screen and (max-width: 400px) and (max-width: 650px) ... { } 와 같이 다양한 조건을 넣을 수도 있다. 스크린의 크기를 줄였더니 적용이된다. 또한 웹브라우저로 다양한 타입의 화면으로 브라우저를 봤을 때 어떤.. CSS - 9 [animation, Animista] animation transform과는 다르게 어떠한 움직임으로 상태를 변화시키켜 애니메이션을 만드는 것말고 그냥 화면에 자동으로 애니메이션이 동작하는 경우 @keyframes 애니메이션이름{ from{ transform: } to{ transform: } } tag { animation: 애니메이션이름 시간 ease-in function } - from 부터 to까지 움직이는 animation을 만들고 싶다. 이제는 애니메이션의 스탭을 줘보자 : 상태를 여러 형태로 바꾸면서 이어지게 하자 위와 같이 여러 단계별로 나누어서 상태를 변화 시킬수 있다. 단계는 1% 2% 등 0~ 100%까지 나눌수 있다. 무조건 애니메이션을 transform으로만 만들라는 것은 아니다. border-radius: 50%등 .. 이전 1 2 3 4 다음
