📅 TIL #12

1. html 배운 내용 정리

👉 html 기초 :

외우자! :facepunch: HTML = 구조 CSS = 스타일 JS = 상호작용

먼저, HTML은 구조를 만든다!

즉, 공사를 하기전에 틀을 만들어 주는 것 인데, 이 틀을 대충 만들면 부실공사로도 이어질 수 있다는 뜻이다. 틀이 잘 짜여져있어야 그 다음 구상도 순조롭게 이루어질 수 있다.

• div

1. 화면에서 한 줄을 차지한다. 2. 줄바꿈이 가능 (block)
2. 별 뜻은 없지만 자주 사용.
   

• span

1. 컨텐츠 크기만큼 공간을 차지한다.
2. 줄바꿈 불가능
3. 하지만 display : line-block 으로 변경해주면 width 와 height 를 설정할 수 있다.

span {
    display: line-block;
    width: 200px;
    height: 50px;
}

• img : 이미지삽입 <img src = ““이미지 링크 주소> 별도의 </img> 라는 태그가 없다.

• 링크 삽입

  1.target 은 새 링크에서 열기

<a href="이미지 링크 주소" target="_blank">페이지</a>

2.title 로 바꿔주면 링크의 툴팁을 표시 (커서를 올렸을 때 나오는 설명)

<a href="이미지 링크 주소" title="링크 내용에 대한 설명"></a>

3.id : 같은 페이지 안에서 이동할 때 사용한다.

1. 이동하고 싶은 위치마다 id 속성을 이용하여 앵커를 만든다(각각 다른 이름으로 지정해야 함.)

<a id="앵커이름">내용</a>

2. 이름 붙여놓은 앵커들을 다시 <a>의 href 속성으로 연결. <a href="앵커이름">내용</a></a>

• 리스트 목록

<ul>
    // 순서가 없음
    <li>
        리스트 * item1 * item2

        <ol>
            // 순서를 지정
            <li>리스트 1. hello 2. world</li>
        </ol>
    </li>
</ul>

👉 input tag :

// Id 와 Password 입력 상자를 만들어 준다.
<div>ID <input ="text" placeholder="type here" /></div>

<div>Password <input ="password" /></div>

// 둘 중 하나만 선택할 수 있는 박스 (name 이라는 그룹을 만들어줘서 하나로 인식해줘야 함) <input type="radio" name="choice" value="a" /> a

<input type="radio" name="choice" value="b" /> b

<div>
    // 여러개 체크 가능
    <input type="checkbox" />
</div>

// 줄바꿈이 되는 text

<textarea>내용</textarea>

// button 모양을 만들어준다.

<button>로그인</button>

<p class="contents">Hello World</p>

// tag란 ?
<p>오프닝 태그와</p>
클로징 태그 // class란 ? attribute (속성)

HTMl 마무리 하면서…

“HTML은 구조를 표현하기 위한 언어다.”

Javascript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였으나, 이제는 node.js를 활용하여 서버 제작 및 PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었다!!

2. CSS 문법 기초

단위

• 절대 단위 : px, pt 등
• 상대 단위 : %, em, rem, ch, vw, vh 등

기타 속성

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height

border 속성

기본적으로 border : 너비 | 스타일 | 색 값을 세개중에 선택해서 지정하며, 순서는 영향을 주지 않음.

• (굵은 테두리) border : solid
• (점 선 테두리) border : dashed

• (두 줄 테두리) border : thick double

• (둥근 테두리) border-radius : px, %, rem 등등 값을 지정해준다.

• border-shadow : 박스 그림자를 만들어준다.

CSS 마무리 하면서…

“CSS는 시멘틱하게 해야한다. 즉, 문서에 의미를 부여한다. 문서의 특정구역이 어떤 가치를 의미하고 있는지 구분해야 한다.”

CSS는 구조적인 문서를 어떻게 시각적으로 표현하는지에 대한 언어다.

👊 내일의 TIW(today I Will)

calculator (계산기)