본문 바로가기

전체 글125

네이버 부스트코스 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.
네이버 부스트코스 HTML 이해하기 html = Hyper Text Markup Language = 웹 페이지를 만드는 언어 html를 편의상 태그, 속성, 중첩, 빈태그, 공백, 주석 이렇게 나누어서 설명. 태그 태그 = 기본 규칙 기호로 표시한다. 종료는 '/' 기호를 사용 ex) hello, html 여기서 은 시작태그, 은 종료태그. h1은 태그이름, hello, html은 내용. 속성 속성은 태그 동작이나 표현 제어에 사용 ex) hello, html 시작 태그 부분에서 공백으로 구분 이름 = 값 인데 값 부분은 홑따옴표 ' 와 쌍따옴표 " 둘 다 사용 가능하다. ex) 태그 하나에 여러 속성 사용 가능하고 순서 상관 없음. 태그중첩 태그 안에 태그 사용 가능. 하지만 열었으면 그 안에서 닫아야 한다. ex) hello.. 2021. 3. 17.