반응형 ⭐ 코딩 기초25 🖼️ 이미지와 링크를 다는 HTML 태그들! ⭐ HTML에서 이미지 달기 img 태그 기본 img 태그를 이용하여 이미지를 단다 src 속성에 이미지 경로를 입력한다. 서버에서 불러오거나 아님 웹에서 불러오거나? alt 속성으로 대체 텍스트를 입력해준다. 구글 SEO나 웹 접근성을 위해 필요하다. - 이미지에 설명 붙이기 설명 표에서 하던 것과 똑같다! figure 태그로 감싼 후 figcaption 태그 안에 설명을 적는다. ⭐ HTML에서 링크 달기 a 태그 기본 텍스트 a 태그로 링크나 이미지를 감싸 링크로 만든다. href는 hypertext reference의 약자, 링크할 주소를 넣는다. 속성의 종류 속성 이름 뜻 href 링크한 문서나 사이트의 주소를 입력한다 target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정한다 d.. 2022. 9. 20. 📝 표를 만드는 HTML 태그들! 표를 만드는 태그 의 기본 구조 📥입력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 📤출력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 는 , , 으로 구성되어 있다. 그리고 로 행(row)마다 묶어져 있으며, 안에는 제목(head)인 , 내용(data)인 가 들어갈 수 있다. HTML 표에 추가할 수 있는 속성 colspan, rowspan : 행 합치기, 열 합치기 📥입력 합친 행 //rowspan="합치고 싶은 셀 갯수" 내용 내용 내용 내용 내용 합친 열 //colspan="합치고 싶은 셀 갯수" 📤출력 합친 행 내용 내용 내용 내용 내용 합친 열 rowspan rowspan은 각 행에서 같은 위치에 있는 셀끼리 합.. 2022. 9. 20. 📝 목록을 만드는 HTML 태그들! HTML로 만드는 목록에는 순서가 있는(ordered) 목록과 순서가 없는 (unordered) 목록이 있다. 순서가 있는 목록은 , 순서가 없는 목록은 , 목록의 각 항목들은 태그를 이용한다. 로 크게 감싸고, 안에다가 로 항목들을 넣는 식이다. , - 순서 없는 목록 만들기 내용1 내용2 ul = unordered list의 약자 순서가 없는 목록을 만들 때 사용 🐍 앞에 작은 원 같은건 불릿(bullet) : 모양은 css의 list-style-type 이용해 바꾼다. 🐍 사이트의 메뉴 등을 만들 때도 사용된다. , - 순서 없는 목록 만들기 내용1 내용2 내용3 ol = ordered list의 약자 ul안의 li에 ol를 넣는 등 ol과 ul은 섞어서 쓸 수 있다. 속성 설명 type : 숫자 .. 2022. 9. 18. 📝 텍스트를 표현하는 HTML 태그들! 텍스트를 표현하는 태그들은 크게 2가지, 블록(Block) 태그와 인라인(Inline) 태그로 구분할 수 있다. (블록과 인라인에 대해서는 이전 글 참고) 블록 태그들은 주로 제목, 문단과 같이 글의 구조에 관련있다. 인라인 태그들은 주로 굵게, 기울이게 등 글자를 꾸며주는데 관련이 있다. 텍스트를 표현하는 블록 태그들 ~ : 제목 표시하기 가장 큰 제목 가장 작은 제목 h1이 1등, 가장 크고 중요한 제목에 쓰인다. 🐍 h1 태그는 문서당 한 개만 있는게 좋다. (웹 표준, 구글 SEO) 나머지 h2 ~ h6은 소제목들에게 써주는게 좋다. , : 단락 만들기, 줄 바꿈 안녕하세요! 반갑습니다! : 대부분 문서 내용을 표현할 때 쓰인다. : 줄을 바꾸는데 쓰인다. 단독으로 한 번만 입력하면 된다. (Se.. 2022. 9. 18. 🖥️ HTML 인라인(Inline), 블록(Block) 비교하기! HTML 태그의 성격에는 두 가지가 있습니다. 바로 인라인(Inline)과 블록(Block)입니다. 이 둘의 차이점에 대해 알아봅시다! ⭐ 인라인(Inline) 특징 See the Pen blog/inline html by dobbyjang0 (@dobbyjang0) on CodePen. x축 정렬 형태로 출력, 한 줄에 출력 공간을 만들 수 없음 (css에서 width/height/margin/padding 적용 불가) 상하 배치 작업 불가능 예 : , 혹은 css에 display : inline;이라 입력한 요소들 ⭐ 블록(Block) 특징 See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen. y축 정렬 형태로 출력, 줄 바꿈이 일어남 공간을 만.. 2022. 9. 18. 🖥️ HTML의 기본 문법 및 구조 훑어보기! ⭐ HTML 기본 문법 HTML의 기본 단위를 요소(element)라 부른다. 요소는 시작 태그, 종료 태그, 그리고 그 사이 내용(content)으로 이루어져 있다. 시작 태그는 태그명, 속성명(attrivute), 속성값(value)으로 이루어져 있다. 속성은 여러 개가 있을 수 있으며, 띄어쓰기로 구분된다. 전체 구조 : 내용 🐍 Self closing Tag의 경우 내용은 없고 시작 태그만 있다. : 2022. 9. 17. 이전 1 2 3 4 5 다음 반응형
