코딩의 즐거움/HTML
-
[ html ] 전체선택자 * 사용 방법코딩의 즐거움/HTML 2020. 11. 22. 12:00
[ html 전체선택자 * 사용 방법 ] html 에서 기호 * 은 전체선택자로 사용된다. html 내부에 있는 모든 태그를 선택하는 선택자로 css에서 html에 기본적으로 들어가 있는 margin 이나 padding을 없앨 때 자주 사용된다. html 내부에 모든 태그란 예) head, title, body, h1~h6, p 등 말그대로 모든 태그를 뜻한다. * 전체선택자 적용 전의 화면 전체선택자를 적용하기 전에 위와 같이 코드를 작성해서 화면을 열어보았다. 위와 같이 빨간색으로 표시한 부분이 우리가 설정하지 않았는데 기본적으로 들어가있는 margin과 padding 되시겠다. * 전체선택자 적용 후 화면 title 태그 안에 style 태그를 넣어서 전체선택자를 적용한 결과다. 기호 *을 입력해서..
-
[ HTML] id(아이디) 선택자와 class(클래스) 선택자코딩의 즐거움/HTML 2020. 11. 16. 16:24
[ HTML ] id(아이디) 선택자와 class(클래스) 선택자 id 선택자와 class 선택자를 쓰는 이유는 css에서 디자인 할때 내용이 중복되거나(class 선택자 사용) 특정 부분에만 디자인 하고 싶을 때(id 선택자 사용) 이름을 부여해서 디자인을 한다. 여기서 아이디 선택자와 클래스 선택자의 차이는? 아이디 선택자는 동일한 이름을 부여할 수 없고, 하나의 태그에 이름을 정해서 디자인을 할 수 있다. html 표시 : id="이름" / css 표시 : #이름 클래스 선택자는 동일한 이름을 가질 수 있고, 여러 곳에 적용해서 디자인을 할 수 있다. html 표시 : class="이름" / css 표시 : .이름 아이디 선택자 예시 html 입력 : 헤더 태그 안에 아이디 이름으로 main_hea..
-
[ 코딩 20 ] html 시멘틱 태그 알아보기코딩의 즐거움/HTML 2020. 11. 6. 11:48
[ 코딩 20 ] html 시멘틱 태그 알아보기 시멘틱 태그는 영역별로 의미를 부여하여 공간을 분리해주는 역할을 한다. header, nav, section, article, aside, footer가 기본적으로 많이 사용된다. 시멘틱 태그를 사용 안해도 웹페이지를 구현하는데는 지장이 없다. 하지만, 시멘틱 태그를 사용하면 작업한 코드를 더 쉽게 확인 할 수 있으며, css(=디자인) 작업시 편리하다. 무엇보다 직장에서는 혼자 일하는 게 아니기 때문에, 코드를 보기 쉽게 정리하는 게 좋다. 그럼 시멘틱 태그는 어떻게 사용하는 걸까? 맨 위쪽 공간에 들어갈 내용과 태그 전체를 묶어준다 위 이미지를 보면 헤더가 로고와 로그인, 장바구니 전체를 감싸고 있는 걸 볼 수 있다. 이처럼 header는 맨 위쪽 공간..
-
[ 코딩 19 ] html 비디오 태그 알아보기코딩의 즐거움/HTML 2020. 11. 4. 17:56
[ 코딩 19 ] html 비디오 태그 알아보기 동영상을 추가하고 싶으면, video 태그를 적어주면 된다. src 는 비디오 파일의 주소를 적어주면 된다. 경로는 해당 폴더명을 적어주면 된다. video 태그의 poster는 비디오를 재생하기 전의 썸네일이미지를 추가해 준다. 그외 video 태그의 속성들 width와 height 속성으로 동영상의 너비와 높이를 조절할 수 있다. autoplay -> 자동 재생 controls -> 컨트롤 막대라고 해서 이미지에보면 점선으로 표시해둔 부분이 컨트롤 막대다. 재생, 음량조절, 다음 영상으로 이동 등이 컨트롤 막대에 나타난다. loop - 동영상을 반복 재생해 준다. 마무리 속성 정리
-
[ 코딩 18 ] HTML input type 종류 알아보기코딩의 즐거움/HTML 2020. 11. 3. 15:34
[ 코딩 178] HTML input type 종류 알아보기 input type 속성과 출력 이미지 확인 글자를 입력할 수 있는 길쭉한 박스가 만들어진다. placeholder="텍스트(클릭 시 사라지는 글자)" 속성을 입력해서 원하는 문구를 삽입할 수 있다. 내용을 입력하면 출력형태와 같이 텍스트가 가려지게 보인다. 버튼 안에 적혀있는 글자는 자동으로 생성된다 value="텍스트" 속성을 이용해서 원하는 문구를 넣을 수 있다. 마찬가지로 버튼 안에 있는 글자는 자동으로 생성된다. input 태그에 value="이름(값)" 속성을 적어주면 이름을 정할 수 있다. 이미지를 버튼으로 사용할 수 있다. 클릭하면 동그란 검은 점이 표시된다. 클릭하면 v 체크 표시된다.
-
[코딩 17] HTML 테이블 태그 두번째코딩의 즐거움/HTML 2020. 10. 25. 12:00
[코딩 17] HTML 테이블 태그 두번째 테이블 태그의 기본구조와 속성은 [코딩 16]에서 포스팅했다. 오늘은 한단계 더 나아가서 테이블 태그에 대해 적어보려고 한다. summary="표에 대한 설명" -> 웹페이지 화면에는 보여지지 않는다. 표에 대한 설명 -> 화면에 보여지는 부분으로, 표의 가운데 위쪽에 표시된다. -> 열 하나 하나에 속성을 넣어서 너비나 배경색 등을 바꿔줄 수 있다. col은 닫히는 태그가 없다. -> 헤드라는 말처럼 표의 머리글이라고 생각하면 된다. 글자가 굵게 나타난다. tr 다음에 td가 아닌 th가 들어간다. -> 바디라는 말처럼 표의 몸통부분이다. 테이블 태그의 기본구조인 tr과 td 태그로 코딩하면 된다. -> 열에 대한 마지막 내용을 적어준다. 예를 들면 열을 전부..
-
[코딩 15] HTML 이미지 링크 걸기코딩의 즐거움/HTML 2020. 10. 23. 12:00
[코딩 15] HTML 이미지 링크 걸기 로고를 누르면 메인페이지로 이동하게 만드는 법. 굉장히 쉽다. a 태그 안에 img 태그를 넣어주면 된다. 일단 웹페이지에 이미지를 불러오기 위해서 경로 설정을 먼저 해준다. 폴더 이름이나 이미지 이름은 변경해도 된다. coding 폴더 > 이미지링크걸기.html coding 폴더 > images 폴더 > naver.jpg (이미지이름.확장자) 하이퍼링크 태그인 a 태그 안에 이미지 태그인 img 태그를 적어서 이미지를 눌렀을 때 a링크가 적용이 되어 홈페이지로 이동하게 된다. 이미지에 보면 빨간색으로 밑줄이 그어진 target="_blank" 속성은 현재창이 아닌 새 창에서 네이버 홈페이지를 열어준다. a 태그의 속성으로 a 태그 안에 적어주면 된다. 저장 후 ..
-
[코딩 14] HTML 이미지 태그 img코딩의 즐거움/HTML 2020. 10. 22. 12:00
[코딩 14] HTML 이미지 태그 img 이미지 태그를 사용하기 위해서 위와 같이 경로 설정이 필요하다. [코딩 3]에서 포스팅했던 배경이미지의 경로 설정과 동일한 방법이다. 폴더명은 임의로 정했다. coding 폴더 > 이미지태그.html coding 폴더 > images 폴더 > heart.jpg 이미지 태그 img 태그에 src 속성과 alt 속성을 필수로 적어줘야 한다. img 태그는 닫히는 태그가 없다 위 이미지를 보면 img 태그 맨 마지막 부분에 한칸 띄고 /를 넣어줬다. 편집기에 입력을 하다보면 내용이 길어지기 때문에 헷갈릴 때가 있다. 그래서 닫히는 태그가 없는 태그는 마지막에 한칸 띄고 /를 넣어서 임의로 구분해준 것이다. 이런식으로. (예시) 않적어줘도 되는데 적어주는 습관을 들이면..