coding 썸네일형 리스트형 [HTML/CSS] 목록을 만드는 태그 (List Tag) 목록 태그 - 리스트 문서에서 항목을 나열하는 목록을 생성 시 사용하는 태그 HTML에 리스트 관련 태그 종류 순서가 있는 리스트 (Ordered List) 순서가 없는 리스트 (Unordered List) 리스트 항목 (List) 정의형 리스트 (Description List) 정의형 리스트에서 용어 또는 이름 (Description Term) 정의형 리스트에서 해당 용어의 정의 (Description Details) HTML에 리스트 태그 종류 1. 순서가 있는 리스트 (Ordered List) - ol, li 순서가 있는 리스트의 태그는 로 정의 리스트의 항목을 로 정의 리스트 요소 앞에 숫자, 영문 등 순서를 알 수 있는 마커가 삽입됨 기본값 예시 리스트기본001 리스트기본002 리스트기본003 .. 더보기 [HTML] 시멘틱 태그 (Semantic Tag) 시멘틱 태그 (Semantic Tag) 의미가 있는 태그. header, footer 등 의미가 있는 태그는 내용을 명확하게 정의함 기존의 구조는 div로 대부분의 구조를 생성 구조에 div를 너무 많이 사용하게 되어 id나 class를 사용하여 구별하였고 이런한 태그들을 대신하여 나온 의미론적 태그 시맨틱 마크업이란? div, span 등 의미가 없는 태그 대신 각 용도에 맞는 시멘틱 태그를 사용하여 의미를 잘 전달하도록 문서를 작성하는 것으로 사이트의 구조를 파악하기 용이하게 함 기존의 구조 시멘틱 구조 시멘틱 태그 사용 장점 ▶ 검색 엔진 최적화 (SEO: Search Engine Optimization) 시멘틱 태그로 구조를 생성 시 검색엔진이 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결.. 더보기 [HTML] 특수 문자 작성 엔티티 코드(Entity Code) 엔티티 코드 (Entity Code) html에는 미리 예약된 문자가 있으며, 이러한 문자들을 예약어라 부름. html에서 해당 예약어를 사용할 경우 미리 예약된 방식으로 사용되므로 이를 기존의 사용 방식으로 사용하기 위하여 사용하는 문자셋을 의미. 엔티티 코드를 제외한 특수문자는 에러로 인식하므로 엔티티 코드로 작성하는 것이 좋음. 자주 사용하는 코드 엔티티 코드 문자식 표현(Entity Code) 숫자식 표현(Entity Number) › › © © © " " " & & & (공백) 엔티티 코드 사이트 https://www.w3schools.com/charsets/ref_html_entities_a.asp https://entitycode.com/ https://www.toptal.com/design.. 더보기 [HTML] 에밋(emmet) 알아보기 에밋 (emmet) = 젠코딩 자동완성 플러그인. 코딩 시 태그를 빠르고 쉽게 작성하는 방법. 간단한 코드만 입력하면 자동으로 완성해줌. 사용 방법 해당 약어들을 차례대로 작성 후 Tab 작성 방법 약어 약어 기능 작성법 결과 . 클래스 생성 .classname # 아이디 생성 #idname * 반복 생성 table>tr>td*2 [] 속성 생성 a[href=#] () 그룹 생성 table>(tr>td*3)*3 {} 텍스트 작성 div{작성내용입니다} 작성내용입니다 $ 숫자. 증가값 표시 li#num$*3 요소를 작성하지 않으면 div로 생성 .newClass 코드 작성 표시 기능 작성법 결과 > 자식 요소 생성 부모 > 자식 ul>li + 형제 요소 생성 형제 + 형제 dl>dt+dd ^ 올리기 다른 .. 더보기 [HTML] 블록 레벨 요소(Block Level Element)와 인라인 레벨 요소 (Inline Level Element) 텍스트 관련 요소 크게 블록 레벨 요소(대부분)와 인라인 레벨 요소(일부분)로 나뉨 가장 큰 차이점은 해당 요소가 한 줄을 차지(즉 width : 100%)하는가 임. 1. 블록 레벨 요소 (Block Level Element) : 한 줄을 차지하는 요소. 즉, 너비값을 최대로 가짐 새로운 요소을 작성 시 줄바꿈되어 새로운 줄에서 시작됨. 너비와 높이값을 지정할 수 있음. TIP! 너비나 마진, 패딩등을 이용해 크기나 위치를 지정하기 위해서는 블록 레벨 요소여야 합니다 태그 기능 참고사항 h1~h6 제목, 숫자가 작을수록 글자가 커짐 h1은 한 문서 당 한 번만 사용 p 단락, 내용 br 줄 바꾸기 단락이 생긴 것 처럼 만들 수는 있지만 웹 브라우저는 단락으로 인식하지 않음 hr 수평선 blockquot.. 더보기 [HTML] HTML 기본 HTML (hypertext markup language) 하이퍼텍스트를 마크업하는 언어 웹페이지가 어떻게 구조화되어 있는지 알 수 있도록 하는 마크업 언어 - 하이퍼텍스트 : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 - 마크업 : 태그를 사용해 문서에서 어느 부분인지 표시하는 것 코딩할 때 기본 HTML 기준으로 코딩하기 웹표준을 준수하기 실무에 맞게 가독성있게 코딩하기 긴 코드 줄 피하기 빈 줄, 공백, 들여쓰기 적절히 사용하기 태그 소스에서 꺽쇠로 묶인 부분 태그 사용법 소문자를 사용 여는 태그와 닫는 태그를 정확히 입력하기 적당히 들여쓰기 (여러번 띄어 쓰기해도 한 칸으로 인식) 속성과 함께 사용 가능 (여는 태그에 사용) : 인라인스타일 포함 관계를 명확히 하.. 더보기 이전 1 2 3 다음
