부스트코스13 네이버 부스트코스 CSS 폰트, 텍스트 typography x를 기준으로 꽉 차는 부분이 ex, 폰트 전체의 영역 em. x를 기준으로 하단 라인이 baseline, baseline 밑의 영역이 descender이다. 반대로 x보다 위의 영역은 ascender. font-familiy 글꼴을 설정하는 font-familiy, familiy-name과 genetic-familiy를 이용해야 한다. family-name의 경우 사용할 글꼴을 말하는데 반점으로 구분해주고 먼저 표기될 글꼴 먼저 선언한다. 만약 표기한 글꼴이 나오지 않을 때를 대비하여 genetic-familiy를 설정한다. 태그의 가장 마지막에 작성하고 대표적으로 sans-serif와 serif가 있다. serif는 삐침이라는 뜻이다. 명조체처럼 끝이 삐친 글자이면 serif 체이.. 2021. 3. 22. 네이버 부스트코스 CSS 단위, 배경, 박스모델 단위 단위는 절대 길이와 상대 길이가 있다. 절대 길이에는 px과 pt가 있는데 pt의 경우 윈도우와 맥이 차이가 있기에 웹 개발 시 권장하지 않는다. 브라우저 호환에 유리한 px를 주로 사용한다. 상대 길이에는 %, em, rem, vw가 있다. 이 중 많이 쓰이는 em의 경우 글씨 크기를 조절할 수 있었다. 1em=16px이어서 만약 20px이면 16px로 나누어본다. 1.25em이 값이 된다. 소수 셋째 자리까지 표시할 수 있다. 색상 색상값은 다양하게 선언할 수 있다. 컬러 키워드 미리 정의된 컬러 이름으로 표현하는 방법. 어떤 색이 나올까요? 16진법 #RRGGBB 앞 두 자리는 적색 가운데 두자리는 녹색 마지막 두자리는 청색을 의미한다. 어떤 색이 나올까요? #RGB 3자리로 축약하여 사용할 .. 2021. 3. 21. 네이버 부스트코스 CSS 이해하기 CSS Cascading Style Sheets 의 약자. 여태까지 배운 HTML은 뼈대라고 하면CSS는 옷과 같은 외적인 것을꾸며주는 역할을 한다고 한다. 사이트들이 HTML으로 만들어지고자주 쓰이는 태그 10개 정도라사실은 비슷한 모습이다.그러나 CSS를 통해 보다 다채롭고독특한 사이트가 만들어지는 것이다. CSS의 문법과 적용 h1 { color: yellow; font-size:2em; } CSS 코드이다. 세부적으로 나누어보자."h1"은 선택자라 부른다."color"는 속성, "yellow"는 값이다.이 둘을 합친 "color:yellow"는 선언. "{ color: yellow; font-size:2em; }"는 선언부. 전체인 "h1 { color: yellow; font-size:2em; .. 2021. 3. 18. 네이버 부스트코스 HTML 콘텐츠모델, 시멘틱마크업 오늘은 이론적인 내용. HTML의 콘텐츠 모델과 시멘틱마크업에 대해 알아보도록 하자. 이론이라 어쩔 수 없이 복붙을 이용했다... 나중에는 스스로 적을 수 있을만큼 이해했으면 좋겠다! 콘텐츠 모델 가지고 있는 성격에 따라 요소의 정의를 정리하는 규칙이 있다고 한다. 이 규칙을 그룹화 시켜놓은 것이 바로 콘텐츠 모델! 1. metadata '콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소.' 라고 한다... 흠...어렵다. 에 주로 들어가는 내용로 알아두자. 2. flow 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다. 대부분의 내용이 flow라 한다. 3.sectioning 문서의 구조와 관련된 요소들. 처음보는 , , , 이 태그들이 포함된다고 한다. 4.he.. 2021. 3. 17. 네이버 부스트코스 HTML 태그 2 표 구성요소 html으로 표를 만들 수 있다. 그런데 표 개수나 병합 등 표를 만드는 모든 것을 html로 만들어야 했다... 먼저 table 태그를 열어 표라는 것을 인식시켜주어야 한다. 그다음 행을 나타내는 tr을 열고 그 안에 셀을 나타내는 td를 열어 표를 만들어준다. 4 X 4 표를 작성하려면 위와 같이 쓰면 된다. 그런데... 또잉.... 이상하게 나온다. 이게 테두리가 투명이어서 이렇게 출력된다고 한다. 아직 안 배운 css를 이용해 표의 테두리를 만들어주자. css 코드를 복붙 해주면 th, td { border: 1px solid; } 내가 생각한 모양은 아니지만 표,,,, 는 만들어졌다. 표가 복잡해진다면 html의 가독성이 떨어지기에 좀 더 세분화하여 표를 나누어준다. 제목을 표시하는.. 2021. 3. 17. 네이버 부스트코스 HTML 태그 두번째 시간. html태그에 대해서 알아보자! 태그는 무려 130개 이상이 있다고 한다. 이걸 다 알아야 하나 막막했지만 자주 쓰이는 것이 있어 사실상 꼭 알아야 할 것은 30여개 정도라 한다. 어느것이 잘 쓰이는지 차례로 알아보도록 하자. 제목과 단락요소 제목의 경우 h1 에서 h6까지의 숫자로 크기를 나눌 수 있다. 뒤의 숫자가 커질수록 반대로 글씨는 작아진다. 이렇게 입력하면 글씨가 점차 작아진다. 근데 궁금한 것, 그럼 h6을 넘어서 작성하면 어떻게 될까? 8까지 적어보고 출력했더니 서식이 적용되지 않는다. 나눠지지도 않고 7과 8이 연달아 작성되는 것을 볼 수 있다. 뭔가 제목이 아니라 글 내용처럼 작성된 듯? 단락의 경우 태그는 p로 작성한다. 일반적으로 body에 내용을 적고 띄어쓰기를 해도.. 2021. 3. 17. 이전 1 2 3 다음
