코딩 수업 1주차를 마치며..

HTML, CSS, JAVASCTIPT

• HTML

  홈페이지 뼈대

• CSS

  뼈대 꾸미기

• Javascript

  동적 반응, 클릭이나 조건 충족 시 동작

HTML 주요 코드

<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
    <li> bullet point!1</li>
    <li> bullet point!2</li>
</ul>

<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
<hr>
input 태그입니다: <input type="text"/>
<hr>
button 태그입니다:
<button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
	
    

**1주차 주요사항**
class사용법
<div class="wrap"> 식으로 css참조해서 사용한다.

span 내부 스타일 여러개 참조시 ;로 구분
span은 특정 부분의 속성을 변경하기 위해 사용한다.
<span style ="display:inline-block; margin:10px; padding:5px; border:dotted 5px blue; color:blue; font-weight:bold; background:pink;">

CSS 주요 코드

배경관련
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-famliy
color

간격
margin
padding

css 참조 사이트 - 부트스트랩(https://getbootstrap.com/)

결과물