코딩의 즐거움
-
[ CSS ] CSS 처음 시작하기_CSS 작성 방법코딩의 즐거움/CSS 2020. 11. 9. 23:22
[ CSS ] CSS 처음 시작하기_CSS 작성방법 html은 텍스트 css 디자인 이렇게 머릿속에 입력해 두면 구분하기 편하다. html에 전달하고자 하는 내용을 적어주고, css로 꾸며주면 된다. 우선 CSS 코드 작성 방법부터 알아보자. 선택자 { 속성 : 값; } CSS를 구성하고 있는 문법이다. 선택자를 적고 { } 안에다가 주고싶은 속성에과 값을 부여하고 ; 로 막아주면 HTML에 적용이 된다. 아래는 작성예이다. html body태그 안에 제목태그인 h1에 안녕하세요. 라는 글자를 적었다. h1(선택자) { width(속성) : 100px(값) ; } -> h1 제목 태그에 width 너비를 100px만큼 주겠다는 의미. h1{ height : 100px; } -> h1 제목 태그에 heig..
-
[ 코딩 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 태그로 코딩하면 된다. -> 열에 대한 마지막 내용을 적어준다. 예를 들면 열을 전부..
-
[코딩 16] HTML 테이블 태그 table코딩의 즐거움 2020. 10. 24. 12:00
[코딩 16] HTML 테이블 태그 기본적인 table 태그의 구조는 위와 같다. 우리가 문서작업할 때 많이 사용하던 표를 만들어주는 태그다. 이미지를 보면 색깔별로 표시를 해뒀는데 table 태그 안에는 tr 태그와 td 태그가 있다. table, tr, td 모두 들어가 있어야 한다. tr 태그를 여러번 입력하면 아래로 차곡차곡 행이 늘어나고, tr 태그 안에 td 태그를 추가로 입력하면 옆으로 하나씩 열이 증가한다. 테이블 태그 속성 추가하기 왼쪽 이미지처럼 html 코드를 작성하면 테두리 없이 구조만 나타난다. 오른쪽 이미지는 table 태그의 속성을 추가해서 작성했다. border="숫자(값)" -> 테두리를 표시해 준다. 숫자가 높을수록 테두리 선이 두꺼워진다. width="숫자(값)" -> ..
-
[코딩 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 태그 맨 마지막 부분에 한칸 띄고 /를 넣어줬다. 편집기에 입력을 하다보면 내용이 길어지기 때문에 헷갈릴 때가 있다. 그래서 닫히는 태그가 없는 태그는 마지막에 한칸 띄고 /를 넣어서 임의로 구분해준 것이다. 이런식으로. (예시) 않적어줘도 되는데 적어주는 습관을 들이면..