본문 바로가기

프론트엔드 개발

[HTML] 리스트 나열 TAG, 용어 정의 TAG 1. ul: 순서가 없는 리스트 나열, ol: 순서가 있는 리스트 나열 (1) 뜻 unordered list, ordered list (2) 특징 양 Tag 다 li(list item)이라는 원소 하나 하나를 의미하는 tag가 자손 tag로 필요! **자손 태그란? 하나의 태그 안에 포함되는 태그들 (3)Emmet으로 적는 법 ul>li*갯수 >: 해당 tag 안에 포함된다는 뜻 *예시 이틀치 옷 세면도구 수건 학습도구 노트북 필기구 교재 2. dl: 용어와 그 정의의 리스트 나열 (1)뜻 dl: description list (dl의 자손 태그) dt: description term (단어) dd: description definition (단어에 대한 설명) (2)Emmet으로 적는 법 dl>(dt+.. 더보기
인용문 태그, 강조문 태그, 축약어 설명 태그 1. 인용문태그 (1) 긴 인용문 태그 인용한 내용 출처 (2) 짧은 인용문 태그 인용할 내용 출처 ** 를 문자 자체로 쓰고 싶을 때 해당 꺽새들은 명령어 취급 받아서 그냥 쓸 수 없다. 로 써야 한다. 각각 less than, greater than 이란 의미이다. 2. 강조문 태그 강조할 내용 3. 축약어 태그 축약된 단어 이렇게 하면 마우스 갖다 대면 풀 내용이 나옴. 4. 직접 해보기 HTML 삽입 미리보기할 수 없는 소스 더보기
강조 태그, 첨자 태그, 밑줄 태그 0. HTML 태그를 쓰는 용도에 대하여 HTML 태그는 정보의 종류를 구분하는데만 사용한다! 디자인을 위해 사용하면 안된다! 현재 프론트 엔드의 디자인 정보는 CSS가 담당하고 있다! 1. 강조 태그 (1) b와 strong 태그 * 문법 * 차이 b는 단순히 안의 글자를 굵게 만드는 것이다. 디자인적 요소는 전부 CSS로 빠졌기 때문에 b를 단독으로 사용하는 경우는 현 시점에서 없다. strong은 글자를 굵게 만드는 것 + 해당 내용이 중요하다는 의미까지 담고 있다. 따라서 구글 엔진은 해당 내용이 중요하다는 것을 인식할 수 있고, 관련 검색이 있을 시 우선적으로 띄어줄 수 있다. 중요하다는 의미 없이 단순히 글자를 굵게 하고 싶을 경우 b 태그 + CSS 문법을 같이 사용한다. (2) i와 em .. 더보기
제목과 태그 0. ! + tab 키 : Html 짜는 데 필요한 기본 툴을 제공 DOCTYPE html> Document 자세한 내용은 심화에서 배우고, 우리는 여기서 body 내부만 신경쓰기로 하자. 다만 위에 부분의 "en"을 "ko"로 바꾸어주자. 그래야지, 페이지의 폰트도 한글로 최적화 되고, 한국어로 검색했을 때 접근성이 높아진다. 1. 제목 태그 제목 내용 제목 내용 제목 내용 제목 내용 제목 내용 제목 내용 h1부터 h6까지 차례대로 제목의 크기가 작아진다. 해당 태그를 이용하면 컴퓨터가 해당 글이 제목임을 인지하게 된다. 따라서 제목으로 검색 시 우리가 만든 문서 제목과 내용이 같다면 그 사람의 검색창에 우리가 만든 문서를 띄워준다. 2.줄바꿈 태그 해당 태그 앞 뒤 내용을 줄바꿈 해준다. 3. 문단태.. 더보기
VSCODE로 마크업 언어 공부 전 세팅 해놓 으면 좋은 것 더보기
HTML_생활코딩_10강 웹페이지는 접근성을 우선적으로 생각 웹페이지에서 제일 중요하게 생각 해야 하는 것은 웹 페이지에 접근하기가 얼마나 쉽냐는 것이다. 1번 - 코딩이란 글을 적고 폰트를 올린 것 : 태그에 대해서 모르는 사람들이 저지르는 실수 coding vs 2번 코딩이란 글을 적고 제목 태그를 붙인 것 coding 둘 다 코딩이란 단어에 하이라이트를 주는 것이라 외관적으로 같지만, 검색엔진이 둘을 보는 시선은 다르다. 검색엔진에 코딩을 쳤을 시 엔진은 제목이 같은 글을 우선적으로 보여주므로 2번을 먼저 띄울 것이다. 1번은 제목이 coding인 글을 전부 보여준 뒤 보여질 것이다. (거의 100번째 태그) 태그를 잘 알고 있어야 자신이 만든 웹 페이지에 접근성을 높일 수 있다. 더보기
HTML Paragraph Tag <br> , <p> </p> 둘 다 줄바꿈 태그다. 1. 둘은 어떻게 다르지? (1) 앞의 내용 ~~~~~~~ ~~~~~ 블라블라 뒤의 내용 : 앞의 내용 뒤의 내용 >둘 사이가 줄바꿈 되어 나타난다. 노숙자 신원 확인 파악 노숙인 검색 (서울=연합뉴스) 이정현 기자 = 앞으로 응급상황에 처한 노숙인이 발견되면 신상 정보가 확인되지 않았더라도 지방자치단체가 지체 없이 조치해야 한다. 10일 경찰 등에 따르면 경찰청과 복지부는 노숙인 응급조치 관련 지침과 인계 절차 개선을 위해 여러 차례 논의한 끝에 최근 합의안을 도출했다. 그동안 일부 지자체가 복지부 지침에 따라 노숙인의 신원이 파악되지 않으면 인수를 거부하는 사례가 있어 일선 경찰들이 입원 등 절차까지 소화하느라 어려움을 호소해왔다. 경찰은 노숙인복지법상 지자체의 응급조치 의무는.. 더보기
2. 제목 TAG This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 아래로 내려갈수록 제목 크기가 줄어듦. 자동 줄 바꿈. 더보기