zerobase/HTML&CSS(26)
-
HTML/CSS강의를 끝내며
HTML/CSS 공부를 하면서 느낀점 사실 HTML/CSS를 처음배운것은 아니지만, 새롭게 공부했던 지난 시간이었다. 늘 기초가 탄탄해야 뭐든 할 수 있다고 생각하며 살아온탓인지, 남들은 다 쉽다고 하는 HMTL/CSS를 나는 어렵게 공부하며 시간을 보냈었다. 기초지만 부실하게 배워서는 안되고, 그 안에서 지켜줘야 할 것들이 꽤 많기에 그 rule을 지키는게 어려웠지만, 이제 나름 머릿속에서 정리가 되어가는것같다. 하지만 조금 정리가 안된 부분들은 강의를 추후에 또 들으며 보충해서 기초를 탄탄하게 쌓을 수 있게 해야겠다. HTML/CSS 공부하면서 어려웠던 개념과 그 이유 CSS의 flex box나 grid 에서 Container에 적용되는 속성과 item에 적용되는 속성, 그리고 div에만 적용이 되고..
2023.04.11 -
애니메이션
애니메이션 개요 transition과 비슷하지만 차이가 있음 transition은user의 action에 의해 효과가 나타나지만 animation은 요소가 계속 스타일이 변경될 수 있게 설정 가능함 transition은 a에서 b로만 전환되도록 설정 할 수 있지만 animation은 a에서 b,c,d등 다수의 스타일 전환을 할 수 있음 @keyframes 여러개의 스타일을 자동으로 작동하게 하는것이기 때문에 여러개의 스타일 시트를 정의해둘 수 있음 @keyframes slidein{ from{ margin-left: 100%; width: 300%;} to { margin-left: 0%; width: 100%; } } animation-name, animation-duration animation-na..
2023.04.06 -
transform
transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있음 시각적 서식 모델의 좌표 공간을 변경 키워드 none 또는 하나 이상의 transform-function값을 사용해 지정할 수 있음 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같음 크기-scale scale, scale X, scale Y scale(x,y) 소숫점도 사용가능함 회전-rotate 각에 대한 숫자 하나만 받을 수 있음 90deg=100grad=0.25turn 180deg=200grad=0.5turn 이동-translate 두가지 값을 사용하면 앞은 x, 뒤는 y 한가지 값만 입력하면 x축으로만 이동함 length와 percentage 사용가능 기울이기-skew 값을 하나 또는 2개 입력..
2023.03.29 -
상속 제어하기
initial 부모의 값을 상속받고 싶지 않을 때 보통 상속 받지 않을 값을 따로따로 설정해서 사용하지만 all을 통해 모두 상속 받지 않을 수 있음 inherit 부모의 값을 상속 받고 싶을 때 이것 또한 all을 이용하여 모두 상속 받을 수 있음 unset 부모로부터 상속 받을 값이 있을 때는 initial로 작용함 부모로부터 상속 받을 값이 없을 때는 inherit으로 작용
2023.03.28 -
메타데이터 요소
메타데이터의 역할 head의 내용은 페이지에 표시되지 않음. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함함 데이터를 위한 데이터 데이터를 설명하는 정보 html문서를 설명하는 정보 title title태그 사이에 text로 문서를 설명하는 제목을 넣어주면 됨 title 태그 사이에 텍스트는 무시가 됨 하나의 html엔 하나의 title만 있어야함 페이지 제목은 SEO에 큰 영향을 줌 명사로만 이루어진 제목은 피하는게 좋음. 광고로 인식을 하는 경우가 많음 meta-문서 정보 빈요소기 때문에 정보가 없음 속성에다가 정보를 나열하게 됨 name이라는 속성은 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공 할 수 있음 application-name은 웹..
2023.03.27 -
HTML5 시멘틱 태그와 표준을 지키는 이유
HTML5과 웹 브라우저 .html 이란 확장자를 구동할 수 있는것이 웹 브라우저 웹 브라우저는 크롬, 엣지, 익스플로어, 사파리 등등이 있음 html은 하이퍼텍스트 마크업 언어로 웹 페이지를 위한 지배적인 마크업 언어임 마크업 언어는 데이터를 어떤 방식으로 어떻게 표현할지 정의함 시멘틱 태그란? 의미를 가진 태그임 ,,,,,등이 있음 사이트의 구조를 파악하기 쉽고, 코드를 이해하기 쉽고 명확하게 전달해줌 코드를 이해하기 쉽다 == 유지보수의 비용을 줄일 수 있다 웹 접근성 측면에서도 스크린 리더가 해당 태그를 사용자에게 더 명확한 의미를 전달 할 수 있음 웹 표준이란? 브라우저 종류와 버전의 차이에 따라 생기는 차이를 호환이 가능하도록 표준으로 웹 페이지를 제작하는 기법 웹 표준의 목적은 웹 사이트에 ..
2023.03.26