코딩의 즐거움/HTML
-
[코딩 12] html 비순차적 목록 태그 ul코딩의 즐거움/HTML 2020. 10. 18. 12:00
[코딩 12] html 비순차적 목록 태그 ul 왼쪽 이미지가 html 편집기에 입력한 내용이고, 오른쪽 이미지가 결과물 이미지다. 내용 ul 안에는 반드시 하나 이상의 li 태그가 적혀 있어야 한다. li 태그가 아닌 ul 태그에는 내용을 입력할 수 없다. (li 태그 안에 입력하기) [코딩 11]에서 순차적 태그 ol에 대해서 포스팅을 했었는데, ol과 다르게 ul 태그는 내용 앞에 순번이 아니라 작은 원이 자리잡은 걸 볼 수 있다. 내가 따로 적은게 아니라 ul 태그의 특징이다. ul 태그의 type 속성을 적어주면 오른쪽의 결과 이미지와 같이 나타난다. type을 적지 않으면 기본적으로 disc 타입으로 표현된다. ul 태그는 굉장히 많이 사용되는 태그로 꼭 기억해두자.
-
[코딩 11] html 순차적 목록 태그 ol코딩의 즐거움/HTML 2020. 10. 17. 12:00
[코딩 11] html 순차적 목록 태그 ol 왼쪽과 같이 ol 태그를 입력해주면 오른쪽과 같은 결과물이 출력 된다. 내용 ol 태그 안에는 반드시 li 태그가 하나 이상은 적혀 있어야 한다. li 태그가 아닌 ol 태그에는 내용을 입력할 수 없다. ol 태그와 li 태그는 한 세트라는 걸 기억하자. ol태그는 내용 앞에 숫자가 나타난다. 내가 따로 적은 게 아니라 ol 태그의 특징이다. ol 태그의 속성 순서를 표시할 유형을 정해주는 type="1, i, I(영문 대문자 아이), a, A" 몇번째부터 시작할 건지 정해주는 start="시작할 순번" ol 태그 안에 type과 start 속성을 적어서 원하는 결과물을 만들 수 있다.
-
[코딩 10] html 글자 기울기 취소선 아래첨자 위첨자코딩의 즐거움/HTML 2020. 10. 16. 12:00
[코딩 10] html 글자 기울기 취소선 아래첨자 위첨자 : 쉽지만 알아두면 유용한 html 태그 : 글자 기울기 : 내용 글자 취소선 : 내용 글자 위첨자 : 내용 글자 아래첨자 : 내용 위 태그를 글자에 적어주면 위와 같은 웹페이지가 출력된다. body 태그 안에 노란색으로 색칠해둔 부분을 보면 된다. 내용 적기 구성은 같으니 태그만 알아두면 되겠다. 솔직히 외울필요도 없는게 요즘은 어디서든지 인터넷 검색이 가능하니까 그때 그때 필요한 태그를 찾아서 사용하면 된다. 그냥 이런 태그가 있구나 정도로 넘어가도 무난하다. 아, [코딩 9]에서 적었던 strong, b 태그 (글자 굵게 만들어줌)와 글자 기울어지게 만들어주는 em 태그는 css에서 강조하고 싶은 디자인 할때도 사용되니 외워두면 좋다 .
-
[코딩8] html 글자 크기와 색 바꿔주기코딩의 즐거움/HTML 2020. 10. 14. 12:00
[코딩8] html 글자 크기와 색 바꿔주기 : 글자 크기 바꾸는 방법 : 텍스트 글자 크기 변화를 확인하기 위해서 1부터 7까지의 사이즈를 입력했다. 참고로 문단 태그인 p를 적어준 이유 : 자동 줄바꿈 + 한줄 더 띄어주고 싶어서 적었으며, p 태그의 align 속성을 적어준 이유 : 글자 가운데 정렬을 하기 위해서 적어줬다. 코딩7에서 다룬 내용으로 실습 겸 응용해 보았다. 이제 html문서를 저장하고 웹페이지를 열어보면 위와 같이 보여질 것이다. 입력한 숫자가 커질수록 글자도 커지며, 8부터는 font size가 적용이 않된다. : html 글자 색 변경하는 방법 : 내용 노란색으로 색칠된 부분이 글자 색을 바꿔주는 태그이다. font 태그의 color 속성을 사용하면 된다. 꼭 잊지말고 닫아주는..
-
[코딩7] 문단 정렬 & 주석 달기코딩의 즐거움/HTML 2020. 10. 13. 12:00
[코딩4]에서 포스팅 했던 문단태그 태그의 정렬 방법에 대해서 알아보려고 한다. 왼쪽 정렬 가운데 정렬 오른쪽 정렬 p 태그의 align 속성을 이용해서 왼쪽 가운데 오른쪽으로 정렬이 가능하다. p태그의 align 속성이 적용된 결과물이다. 추가 ㅣ 주석 달기 웹페이지에는 보여지지 않고 html에 주석을 달아주는 기능이다. 위와 같이 적어주면 된다. 시작과 끝을 나타내주는 문구를 적어주기도 한다. 웹페이지를 확인해보면 주석으로 달아준 글은 웹페이지 나타나지 않는다. p태그의 align속성 주석 처리 방법에 대해서 알아보았다.
-
[코딩6] body 여백코딩의 즐거움/HTML 2020. 10. 12. 01:32
구조를 형성하는 태그에는 기본적으로 여백을 가지는 경우가 많다. body 태그와 table 태그가 대표적이다. html 편집기에 내용을 적고 br태그로 줄바꿈만해주고 저장한 웹페이지다. 빨간색으로 표시된 부분이 기본적으로 들어가 있는 여백이다. 그러면 여백을 없애거나 여백을 더 많이 주고 싶을 때는 어떻게 해야 될까? body 태그 안에 marginwidth="원하는 값" marginheight="원하는 값" 너비와 높이에 값을 줘서 여백을 조절하면 된다. 0을 주게되면 위와 같이 여백이 없어지게 된다. marginheight="100" marginwidth="100"을 줘서 여백이 넓게 생긴걸 볼 수 있다. 빨간색으로 체크한 부분이 100씩 넣어준 여백이다. 별거 아니지만 공부하지 않으면 모른다는 거...