YTCW

아마도 HTML 을 처음 배울 때위 html 코드부터 접했을 것이다.​이러한 것은 짧고 직관적이어서혼란스럽지 않았지만처음 마주하는 meta tag에당황스러웠었다.​오늘은 meta tag에 대해 알아보도록 하자.​meta tag가 하는 일은 무엇일까?​meta tag는 HTML 문서가 어떤 내용을 담고 있고,문서의 키워드는 무엇이며,누가 만들었는지 등실제 사용자에게 보이지 않는 부분을작성하는 곳이다.​meta tag는 head tag 안에 사용되며사용자에게 정보를 주는 목적보다는검색엔진에 도움이 되는 tag이다.​일반적으로 문자 집합, 페이지 설명,키워드, 문서 작성자 및 뷰포트 설정을지정하는데 사용된다.​여러 가지 예)  간단한 예를 들어 description 을 설명하자면구글 검색엔진에서 네이버라고 검..

많이 쓰이지는 않지만알아두면 좋은 여러 가지 tag들을 배워보자.​첫 번째로 간혹 문단 내에 어떠한 약어나어려운 단어들은 사용자가 생소하기 때문에잘 모르는 경우가 있는데마우스를 해당 단어에 올렸을 때어떤 내용인지 설명해 줄 수 있는 tag가 있다.​바로 ​abbreviation ( abbr ) tag이다.아래의 문단을 예로 들어보자. The WHO was founded in 1948.  이런 문단이 있을 때WHO 를 모르는 사람도 있을 것이다.​그러면 abbr tag를 이용하여해당 단어를 감싸준다.​그리고 반드시 title attr 을 사용하여title="설명 내용" 에 설명할 내용을작성해 주면 된다.  The WHO was founded in 1948. 두 번째로 어떤 대상의 이름, 전화번호, 지리, ..

media file 은 무엇일까?​HTML 문서 안에 text 가 아닌 어떤 다른 형태의 데이터를 집어넣을 때 media file tag 들을 사용한다.​앞서 알아본 img tag도media file tag 라고 할 수 있다.​img tag를 제외하고audio tag와 video tag를 배워보자.​첫번째는 audio tag 를 알아보겠다.​사용 방법이 img tag 와 매우 유사하다.​attr 으로 src="파일 경로"를 작성해 주고저장하면 아무것도 나타나지 않는다.​재생 버튼과 볼륨 조절 버튼을보이게 하고 싶다면controls를 작성하면 된다.  //컨트롤러 만들기 //컨트롤러는 보여주고 음소거 상태//컨트롤러는 보여주지않고 자동재생하기//컨트롤러는 보여주지않고 반복 자동재생하기  위 코드처럼 사용한..

table tag의 기본 구조는 배웠으니attr에 대해 알아보기​table tag에는 어떤 attr이 있을까?대표적으로 scope="col or row"와colspan="숫자" or rowspan="숫자"가 있다.​아래의 표를 만들면서 알아보자   사진을 보면 아침 식사는 가로로 전체 병합이 되어있고 경영학 강의, 응용 수학, 물리학 강의는세로로 두 줄 또는 세 줄로 병합되어 있다.​기본 구조를 이용하여 작성부터 해보자.  시간 월 화 수 목 금 토 일 ..

table tag는데이터를 표로 담고 싶을 때사용하는 tag이다.​table의 기본 사용법은이전에 ul, ol, dl 처럼전체적으로 감싸주고 시작한다.​table tag 안에 넣고자 하는 데이터를 넣는다.   위 사진을 예시로table tag 안에 들어갈 field tag는tr, th, td 가 있는데제일 먼저 tr 을 파악해야 한다.   tr 은 table row 의 약자이며총 3줄이므로 아래와 같이 작성한다.     그리고 tr 1번째 줄에는 th 1과 th 2th 가 2개 들어있다.​th 는 table header 의 약자로테이블의 제목이다.​차례대로 Month, Savings을 작성하고  Month Savings  그 아래 tr 2, tr 3에는td ( table ..

마지막으로textarea tag button tag 를 배워보자.​input tag를 사용하면여러 줄의 정보를 받을 수 없다.​그래서 textarea를 사용한다.​textarea attr으로rows, cols 가 있지만 필수는 아니다.​rows는 몇 줄의 text를 받을 건지 정하는 것이고cols는 가로로 몇 자의text를 받을 것인지 정하는 것이다. Review of W3Schools: At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.  그리고 form tag에 작성된정보를 submit 하기 위해서는button 이 필요하다.​button에도..

form field tag 중 하나인select tag에 배워보자 일상적인 웹 라이프에서 이러한 박스를 많이 보았을 것이다.​이것이 바로 select tag인데사용하기 위해선 간단한 문법 사항을 지켜야 한다.​select 상자에 들어갈 목록을 만들기 위해서는option tag를 사용하여여러 개의 목록을 작성해 주고option tag attr에 서버로 보낼 value 값을 지정해 줘야 한다.​이전 글에서는type="radio 또는 checkbox"에name attr을 이용하여 하나로 묶어주었지만​select와 option tag는부모 자식 관계로 묶여있기 때문에option tag에 사용해 줄 필요가 없다.​서버에 name=value로 전달할 때는 opction tag를 다 감싸고 있는select tag에 ..

form tag 안에 채울다양한 Field tag를 알아보도록 하자 ​첫 번째로는 input tag사용자에게 정보나 데이터를 받을 때가장 기본적으로 사용되는 field tag 중 하나이다.​input tag를 사용할 때는 반드시 사용해야 할 attr이 있다면 type="?" 이다.​사용자한테 받고 싶은 정보나 데이터 중에숫자만 받고 싶을 때가 있을 수 있고어쩔 땐 글자를 받고 싶을 때도 있고여러 가지가 있다.​input의 attr에 대해 좀 더 배워보자.​placeholder="원하는 문구"를 사용하면사용자가 아무것도 입력하지 않았을 때원하는 문구를 보여줄 수 있다.​이때 사용자가 해당 input에 text를 넣기 시작하면placeholder 값이 사라진다. //두번째의 경우 value 값 html을 ..

form tag는이전에 배웠던 tag들과 목적이 다르다.​사용자들에게 정보, 데이터를 받아서전달해 주는 목적으로 사용한다,​간단한 예를 들면 로그인할 때아이디, 비밀번호를 작성하고로그인을 누르면 서버에 전달해 주는 tag이다.​이 글에서는 form tag에 대한 개념만 알아보자.​form tag에는 여러 가지attr이 있지만 그중에서도반드시 두 가지의 attr이 존재해야 한다.​​첫 번째는action="api의 주소"위 상황과 같이아이디, 비밀번호를 작성하고로그인을 눌렀을 때 이동해야 하는server의 주소값을 작성하는데그 주소를 action="api의 주소"에 작성해야 한다,​우리는 server 를 배우고 있는단계가 아니기 때문에 넘어가고반드시 있어야 하는 attr이라는 것을명심해두자.​두 번째는met..

정의할 때 사용하는 정의 list description list ( dl ) 은앞글에서 배운 ul, ol과 마찬가지로전체를 감싸는 tag이다.   그다음에 사용하는 tag는li tag 가 아니라description term ( dt ) 를 사용한다. dt 는 정의할 대상을 작성하는 곳이다.    그다음 사용할 tag는description data ( dd ) 를 사용한다.dd tag 는 dt tag 를 설명하는 내용이 들어와야 한다. dd tag 는 문단, 줄 바꿈, 이미지, 링크, 목록을 넣을 수 있다.    이제 tag에 대한 이론은 들었으니적용한 예를 살펴보자  Coffee Black hot drink //dd가 윗방향으로 dt를 만났을때 dt에 대한 정의 내용이 맞다면..