Developer Gonie

태그란? meta 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용하는데, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다. 메타데이터를 남겨두기 위해 사용할 수 있는 태그로 같은 요소들도 있는데 이것으로는 표현할 수 없는 메타데이터를 남기기 위해 meta 태그를 사용한다. 브라우저가 메타데이터를 이용하는 한 예시로(이건 meta 태그를 이용한게 아니지만) 태그에 텍스트를 남기면 브라우저는 이 정보를 이용해 브라우저의 창의 제목을 띄워준다. 태그로 수행할 수 있는 동작 예시 여러가지가 있지만 단, 한가지만 살펴보자면 아래와 같은 것이 있다. 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제 meta 태그에 속성으로 http-equi..

- body 안에서 쓰이는 태그이며, 화면의 상단에서 큰 제목이 되는 것을 여기에 작성한다. - 본문 내용이 여기서 본격적으로 시작되는구나를 알 수 있도록 본문 내용을 이 부분에서 작성함 - body 안에서 쓰이는 태그이며, 화면의 맨 아랫부분임을 알리기 위해 사용한다.

'큰따옴표' 사용예시(") '&'기호 사용예시(&) & 기호는 기호 그대로 사용해도 잘 보여졌던거 같은데 만약 기호 그대로 보여지지 않는다면 이 방식을 사용하면됨. 공백 여러번 삽입 사용예시( ) 스페이스로는 여러번 공백을 삽입한다고 해도 1번으로 인식되는데 공백을 여러번 삽입하고 싶을 때 사용하면 된다. '>'기호 사용예시(>) '>>' 혹은 '

onLoad 속성 onLoad 속성은 이 속성을 지정해준 요소가 완전히 로드되면, 자동으로 호출되는 함수를 지정할 수 있다. 다른 태그에서도 지정 가능한 속성이나, 주로 태그 내에서 사용된다. 단, 태그에 속성을 추가해주는 방법 외에도 아래와 같이 자바스크립트 코드에서 바로 작성할 수 있는 방법도 있다. //방법1. html 태그 내에 속성을 추가하여 사용하는 방법 //방법2. html에서 속성을 추가하는 것 없이 javascript에서 자동호출되는 onload 관련 함수를 정의 window.onload = function(){ alert("asasdsadaad"); } 지원되는 HTML 태그 , , , , , , , 과

선택박스 만들기1(완전 기본, 이벤트 처리기능도 없는 상태) - onChange 속성을 주지 않은 상태여서 다른걸 선택한다 해도 그뿐이지, 이벤트를 다룰 수 없다. - selected 는 선택된 요소를 의미하며, 원래는 selected="selected" 이나 속성이름과 값이 같아서 값을 생략한 것이다. 요소1 요소2 요소3 선택박스 만들기2(이벤트만 javascript로 처리하는 방식) * option으로 들어가는 요소가 많지 않은 경우 사용되는 방식 * onChange속성에서 '선택된 원소가 변경될 시 호출될 함수'를 지정해 줄 수 있는데, 이는 Javascript로 작성됨 (((링크))) Text1 Text2 Tex3 선택박스 만들기3(이벤트처리, option태그 추가 모두 javascript로 하..

네이버에서 '색상표' 를 검색하면 색상에 따른 RGB 숫자를 알 수 있다. R, G, B각 색깔별 0~255 숫자의 범위를 가지며, HTML, CSS 모두 색 지정이 필요할 때, 이 표현 방식을 사용한다. 단, HTML, CSS에서는 각 숫자를 16진수화 한 것을 붙여 사용한다. 한가지 예를 들면 아래의 색은 R:152, G: 247, B: 145 이다. 152를 16진수화 하면 98 247을 16진수화 하면 F7 145를 16진수화 하면 91 의 결과가 나오는데 이 수들을 연달아 붙여서 # 과 함께 적어준 것을 HTML, CSS에서 사용한다. #98F791 단, 99FF00 이렇게 두 숫자가 연달아 나오게 된다면 #9F0 으로 써줘도 저렇게 인식한다는 것을 알아두자. 아래는 사용예시

블록 요소 한 줄을 다 차지하는 요소. h1~h6, p, div 태그 등이 있다. 블록요소더라도 css의 float 속성을 사용하면 이 특성을 제거하여 옆에 글씨가 올 수 있게 할 수 있다. 인라인 요소 블록요소와 달리 태그로 감싸진 영역만 차지함 span, img 태그 등이 있다.

다양한 input의 타입 버튼 submit 버튼 - 요소 내부에 존재한다면 form 속성 중 action으로 지정한 곳으로 이동하는 기능을 가짐 텍스트 입력칸 비밀번호 입력칸 - 입력한 값이 검은 동그라미로 보여짐 이메일 입력칸 - if(입력한거.indexOf('@') != -1) { return false } 와 같은 입력값 검증을 알아서 해줌 체크박스 - 같은 name을 가진 체크박스들이 존재할때 여러개 선택 가능 - 선택된 요소에는 자동으로 checked="checked" 속성이 붙게된다.(헷갈리는게 요소는 선택될 시 selected 속성) 소녀시대 방탄소년단 박재범 레드벨벳 라디오버튼 - 같은 name을 가진 라디오 버튼들이 존재할때 그 중에서 최대 1개만 선택됨 - 선택된 요소에는 자동으로 ch..

Text - 별기능은 없고 문장의 중간에서 일부 텍스트의 범위를 지정하기 위해 사용된다.

Text - p 태그는 paragraph의 약자로 문단을 구분하여 작성할 때 사용되며, 블록 요소로 한 줄을 다 차지한다. - div도 문단을 구분하여 작성할 때 사용하지만, p 태그와 다르게 좀 더 큰 덩어리의 경우에 사용함

* 셀을 어떻게 합쳐나가야 할지 모르겠다면 n * n 의 테이블을 먼저 생성해두고 하나씩 해나가면 된다. + rowspan : 행 방향 즉 '현재 위치에서 아래 방향'으로 n 칸의 셀을 합침 + colspan : 열 방향 즉 '현재 위치에서 오른쪽 방향'으로 n칸의 셀을 합침 쉬운예시 좀더 복잡한 예시 아래그림을 보면 뭐 부터 해야할지 모르겠는가? 해결 단계는 이러하다. 1. 4 * 4 크기의 테이블을 먼저 만들어라. 2. 내부 및 바깥에서 선이 보여지는것을 보니 border 속성을 추가해라. 3. 셀이 합쳐질 때 어디가 시작점인지 파악하자. '일'이 적혀진 셀: (1행,1열) 부터 시작해서 행 방향 즉 현재 위치서 아래 방향으로 셀을 합침 '이'이 적혀진 셀: (1행,2열) 부터 시작해서 열 방향 즉 ..

열이름1 열이름2 열이름3 1행의 1열값 1행의 2열값 1행의 3열값 2행의 1열값 2행의 2열값 2행의 3열값 * 속성을 table 태그 말고 하위의 tr이나 td 태그에 적용시키면 속성의 적용 범위를 줄여서 사용할 수 있다. bgcolor, align 등이 그러하다. - 열 이름을 사용하지 않고 테이블을 만드는 경우에는 th 태그 들을 포함해 그 상위의 tr 부를 생략해도 된다. - tr은 행추가, td는 열의 값을 넣기 위해 사용된다. - tr에 어떠한 속성을 주는 경우 자식인 td 들에도 자동 적용된다. 만약 이를 무시하고 덮어쓰고 싶으면 td에서 또 한번 속성을 부여하면 부모것 대신 자신의 속성대로 적용됨. + border 속성 : 테이블의 바깥 및 안쪽에 안보이던 선을 생성하며, 테이블 바깥 ..