Programming/HTML, CSS32 [HTML] 이미지 관련 태그들 웹 브라우저 상에서 이미지는 많은 역할을 하고 많이 쓰입니다. 이번엔 브라우저에 이미지를 넣는 방법을 알아보겠습니다. : 이미지를 삽입할 때 사용합니다. 웹에서는 jpg, png, gif 형식의 이미지 확장자 파일만 삽입이 가능합니다. 이미지 삽입방법은 img 태그안에 src속성을 넣어주어 이미지 파일이 있는 경로를 알려주어야 합니다. 이미지를 넣는건 알겠는데 "경로"라고 하는 익숙하면서도 갑자기 나온 생소한 단어가 눈에 띕니다. 경로는 말그대로 해당 파일이나 문서의 저장공간상의 위치를 말합니다. 이 경로는 이미지말고도 다른 html파일이나, 자바스크립트 파일을 삽입할 때도 사용하기 때문에 알아두어야 합니다. 경로에는 "절대경로"와 "상대경로" 두 가지가 존재합니다. 경로 절대경로 해당 파일의 전체 UR.. 2020. 8. 21. [HTML] 표를 만드는 태그 : 표 하면 떠오르는 형태의 기본적인 표를 만들어주는 태그입니다. 태그 하나만으로 표가 만들어지는 것은 아니고 열과 행을 만들어주는 태그들과 함께 사용함으로써 표가 완성됩니다. : 표에서 행을 만들어줍니다. : 표에서 셀을 만들어줍니다. 셀이란 표에서 한 칸의 공간을 셀이라고 하며, 이 셀의 갯수에 따라 표의 열이 정해진다고 생각하시면 됩니다. : 표에서 제목 셀을 만들어줍니다. 제목은 다른 태그칸의 글씨보다 굵게나오며 가운데 정렬이 되어나옵니다. 표가 만들어졌습니다. 하니만 표에 테두리가 없으니 표인지 글자의 나열인지 구분하기 어렵습니다. 그럴때는 table태그의 속성에 border = "테두리값"을 추가해주시면 됩니다. 테두리가 있는 표가 필요할땐 border속성을 넣고, 표 형태의 배치만이 필요한 .. 2020. 8. 20. [HTML] 리스트를 만들어주는 태그들 : 리스트의 내용을 표시할 때 사용합니다. 순서가 있는/없는 리스트 모두 사용합니다. : 순서가 없는 리스트(Unordered List)에 사용합니다. 기본값은 검은 원 모양입니다. : 순서가 있는 리스트(Ordered List)에 사용합니다. 기본값은 아라비아숫자입니다. 순서를 만드는 태그와 태그는 서로 중첩이 가능합니다. 원하는 모양의 리스트를 얼마든지 만들 수 있습니다. 여행안내나 세미나안내를 보면 제목-설명 이런식으로 구성이 되어있는것을 본적이 있을것입니다. 이런식의 구성을 가진 설명리스트(Description List)를 만드는 태그가 따로 존재합니다. : 설명목록을 만드는 태그입니다. : 설명목록의 제목을 표시하는 태그입니다. : 설명목록의 설명 내용을 표시하는 태그입니다. 2020. 8. 19. [HTML/CSS] 특수문자 입력하기 제목이 특수문자 표현하기인데 한자+특정모음키+숫자로 쓰면 되는거 아닌가 라고 생각할 수 있습니다. 하지만 html에서 사용하는 등과 같은 특수문자는 키보드로 입력해줘도 인식되지 않습니다. 그래서 이번 포스트에서는 그런 특수문자 몇가지들을 알아보겠습니다. 특수문자 키워드 방식 숫자 방식 > > & & & 공백(space)     " " " 혹시 몰라서 전체 특수문자표도 첨부해 봅니다. https://dev.w3.org/html5/html-author/charref 2020. 8. 19. [HTML] HTML 태그 정리, 텍스트 관련 태그들 (인라인 요소) , : 텍스트를 굵게 표시할 때 사용합니다. 둘을 눈으로 보았을때는 똑같아보입니다. 하지만 둘의 차이점은 화면 낭독기 기능에서 차이를 보입니다. 화면 낭독기가 태그의 텍스트를 읽을때는 그 부분을 강조해서 읽어줍니다. 반면 태그는 낭독기가 따로 강조해주지 않습니다. 즉, 태그와 태그의 차이점은 굵은 글씨로 표시하는가와 강조의 의미를 담았는가의 차이라고 할 수 있습니다. , : 기울임꼴, 이탤릭체라고 부르는 방식으로 텍스트를 표시할 때 사용합니다. 위의 태그의 경우와 마찬가지로 태그는 단순히 이탤릭체 표시, 태그는 이탤릭체 표시를 강조할 때 사용합니다. : 인용구를 나타낼 때 사용합니다. 인용구를 표시하는 태그인 와의 차이점은 는 블록요소이므로 사용하면 줄바뀜과함께 들여쓰기가 되고, 한 줄을 차지합니다. 그.. 2020. 8. 19. [HTML] HTML 태그 정리, 텍스트 관련 태그들 (블록 요소) : 제목을 표시하기 위한 태그. 일반 텍스트보다 크기가 크고 굵게 표시 된다. ~의 형태로 사용되며, 이 가장 크며, 으로 갈수록 작아진다. : 단락 단위의 텍스트를 표시할 때 사용하는 태그. 닫는 태그 전까지 텍스트를 한 줄로 표시한다. 단락 단위이므로 앞뒤에 간격이 생긴다. (css속성을 통해 제거 가능!) : 웹 브라우저 상에서 줄 바꿈을 표시하기 위한 태그. 닫는 태그가 없다. : 가로 줄을 삽입 하는 태그. 닫는 태그가 없다. : 인용구를 삽입할 때 사용하는 태그. 웹 브라우저에서 들여쓰기되어 보여진다. : HTML 소스파일에서 입력한대로 텍스트를 표시해주는 태그. 2020. 8. 18. 이전 1 2 3 4 5 6 다음 300x250
