Suyeon BLOG

구조적으로 문서 설계하기 ex) 전공책이 800p인데 이걸 다 읽어야 한다면 우선 목차를 살핀다. 1. 몇 개의 챕터로 구성되어있는지 2. 각 단원의 제목 3. 소단원의 제목과 내용 - 이렇게 흐름을 파악한다. 그래서 어떨 때 이런 태그를 사용하는지 알아볼 것이다. Sectioning Elements (단원을 표현하는 태그들) - section, article, nav, aside - 단원이다. 따라서 단원에는 단원의 제목이 들어가야 하기 때문에 heading 태그가 들어가야 한다. 트위터 마크업 챌린지 1. header 작성하기 - 맨 왼쪽에 있다고해서 aside가 아니다. 트위터 로고를 가지고 있고 밑에 menu도 가지고 있어서 header 영역이다. - 로고를 클릭하면 메인 페이지로 오기 때문에 a..

1. 내가 강의를 듣지 않고 직접 div로 묶고 CSS에서 적힌 거 참고해서 완성했다. 너무 멋있는 나..⭐ 실습 파일01: Self/29/index.html 2. HTML에서 자주 쓰는 엔티티(entities)를 검색하고 찾아서 써봤다. 이것도 내가 직접⭐⭐⭐ - heading 태그라도 그 태그가 어떤 역할을 하는지 생각을 하면서 마크업을 해야 한다. https://mine-it-record.tistory.com/273 실습 파일: Self/30/index.html 3. 이미지 태그를 썼는데 alt에 할 말이 없다면 비워두는 것이 좋다고 한다! - 이때 이미지가 어떤 의미를 가지고 있지 않다고 하면 CSS로 꾸며주는 것도 좋다고 한다.(img태그를 사용하지 않고!) 실습 파일: Self/31/index..

Document Type Declaration - DTD 선언이고 문서 형식 선언이라고 합니다. - 브라우저에게 여기에 작성된 문서는 HTML의 최신 버전으로 맞게 작성된 것이니 여기에 맞게 렌더링 해주세요. 라고 알리는 것입니다. - 이 안에는 와 태그만 들어갈 수 있습니다. - 사람으로 치면 뇌라고 생각하고, 웹 문서에 관한 meta-data를 가지고 있습니다. - title, style, script, link, meta 태그가 들어갑니다. - title: 웹 문서의 제목, 검색 최적화와 굉장히 관련되어있기에 신경써서 작성하면 좋습니다. - link: CSS 파일을 참고할 때 사용하는 태그입니다. 이때 폰트 중 가장 적절한 폰트는 스포카 한 산스입니다. https://spoqa.github.io/s..

abbr - abbreviation의 약자이고, 뜻은 약자(줄임말)라는 의미입니다. - 어떤 용어를 썼을 때 그것의 뜻을 모르는 사람들을 위해서 사용합니다. - 이때 title="줄임말의 전체 의미" 속성을 써줘야만 합니다. 해당 단어에 마우스를 올리면 title에 적힌 글이 보여집니다. 줄임말 address - 연락처에 관한 것을 마크업할 때 사용합니다. - 사용 예: 주소, URL, 이메일, 전화번호, SNS - 먼저 누구의 관한 연란처인지 쓰고 그 다음에 연락처를 씁니다. pre - 이 태그 안에서 띄어쓰기 100번, 한칸 뛰기를 하면 이게 다 적용이 되어서 화면에 출력됩니다. - 원래 띄어쓰기 100번해도 1번만 적용되지만 pre는 그렇지 않습니다. - 이 안에 code라는 태그를 작성합니다. c..

Media - , , - 여러 가지 종류의 미디어 파일이 있다면 - 1. assets라는 파일 안에 다 넣는다. - 2. img는 images, video는 videos, audio는 audios 폴더에 넣습니다. auido - audio에는 src라는 속성을 무조건 써야 합니다. (들어갈 오디오 링크 넣는 부분) 이때 src를 태그로 작성할 수도 있습니다. 이때 각 type을 적어줘야 합니다. (type="audio/mp3") ※ 브라우저마다 실행될 수 있는 버전이 다르기 때문에 source 태그를 사용합니다. (src 여러 개 작성 가능) - controls 라는 속성을 사용하면 재생버튼이 보여집니다. (이게 있어야 화면에 보여집니다.) - autoplay는 자동 재생 속성입니다. controls가 ..

Table - 데이터를 담은 표를 만들 때 사용합니다. - 로 시작하고, 그 안에 , , 가 있습니다. - 각 셀마다 헤더에 관한 셀인지(th), 데이터에 관한 셀(td)인지 구분해야 합니다. tr - 테이블 행을 의미합니다. 행이기 때문에 가로로 보여집니다. th - th의 개수에 맞게 td를 써야 합니다. (개수가 다르면 bad이므로!!) - th가 들어있는 tr을 로 묶어주면 더 명확하게 이건 th이다 라는 의미를 브라우저에게 전달합니다. - scope 이라는 속성을 가지고 있습니다. 가로 줄의 제목(row)인지, 세로 줄의 제목(col)인지 명확하게 나타냅니다. 또는 td - Table의 데이터를 의미합니다. - th 개수와 동일하게 td를 작성해야 합니다. - td가 들어있는 tr을 로 묶어주면..

Select - 자식 태그에는 option을 사용합니다. - radio, checkbox에서 사용했던 name, value를 무조건 작성해야 합니다. - name은 select에 작성하고, value는 선택된 값을 전달해야 하기 때문에 option에 작성합니다. HTML Textarea - 글을 쓸 수 있는 input과 비슷한 태그입니다. - 길이와 높이를 조절할 수 있는 rows, col이 있습니다만, CSS에서 조절 가능하니 안써도 괜찮습니다. - input type="text" 와 같이 placeholder, required, value 등 지정할 수 있습니다. Button - 버튼을 사용할 때는 무조건!! type을 적어야 합니다. - type 종류: button(특정목적이 없을 때 사용), su..

form - form 태그를 사용할 때 사용합니다. - form을 작성할 때 꼭 같이 써야할 속성들이 있는데 바로 method와 action 입니다. action - form을 처리할 로직이 있는 주소를 작성합니다. - 이것은 스스로 절대 알 수 없습니다. 백엔드 개발자가 알고 있습니다. method - 값에는 GET과 POST가 있습니다. - 데이터를 전달할 때 URL에서 어떻게 보여질지 정합니다. - 중요한 정보를 전달할 때는 post를 사용합니다. ☆ 여기부터는 form 안에 어떤 태그가 사용되는지 알아볼 것입니다. 1. input - 입력창 입니다. - 이때 type, placeholder, maxlength, minlength, required, value - type 종류: text, numb..

blockquote - 문단 전체가 인용문일 경우에 사용합니다. - 인용문을 가져온 곳을 설명할 때는 태그로 감싸줍니다. 두 개 다 안에 작성합니다. - 인용문을 가져온 곳의 주소를 입력하고 싶을 때는 합니다. q - quote의 약자입니다. - 문장 내에 조금씩 사용되는 인용문에 사용합니다. - 감싼 문장이 화면에서 "" 로 묶어져서 보여집니다. 실습 파일 01: Quotations/quote.html

dl - description list의 약자입니다. - 정의 리스트를 만들 때 사용합니다. (ul, ol과 똑같습니다.) - 은근 많이 사용됩니다. - 정의를 설명할 때 사용합니다. (사전에서 용어에 대한 정의를 설명할 때) - key-value로 정보를 제공할 때 사용합니다. {key: value} (이거는 이거고, 저거는 저거야 할 때 아주 유용합니다.) ※ dl의 자식은 div, dt, dd 뿐입니다. dt - description term의 약자입니다. - key-value에서 key 역할을 합니다. - 이때 '정의'의 의미를 강조하고 싶을 때 으로 감싼다음 로 감싸주면 됩니다. development dd - description data의 약자입니다. - dt의 용어를 설명하고, key-val..