Web Basic/HTML

text-shadow 텍스트에 그림자 효과를 주는 속성이다. 아래와 같은 형식으로 작성한다. text-shadow : 아래와 같이 텍스트에 그림자 효과가 적용된다,. 예시 코드는 아래와 같다. HTML CSS JS text-transform 영문자 표기시 텍스트의 대소문자를 원하는대로 바꿀 수 있다. text-transform속성은 아래와 같다. capitalize : 첫번쨰 글자를 대문자로 바꾼다 uppercase : 모든 글자를 대문자로 변경한다 lowercase. : 모든 글자를 소문자로 변경한다. 예제 코드는 아래와 같다. html css JS letter-spacing letter-spcing속성은 글자 사이 간격을 조절해 준다. px, em과 같은 단위나 퍼센트로 조절해 줄 수 있다. 예제 코..
클래스 지정자 태그 속성중 'class'를 명시한 태그에 대해 선택을 하기 위해서는 아래와 같이 '.' 기호를 사용해서 지정해 주면 된다 .클래스명 {css 규칙들} 예제 코드로 아래와 같이 작성할 수 있다. paragraph, bg라는 값의 클래스를 가진것에 대해 모두 적용되는것을 볼 수 있다. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scramble..
이 포스트에서는 input태그의 placeholder,readonly, autofocus 세가지 속성을 살펴볼 것이다. placeholder placholder는 입력란에 힌트를 표시해줄 때 사용하는 속성이다. 아래 코드와 같이 input 태그에 "Type text here"라는 값을 가진 placeholder 속성을 넣어준다고 가정하자. Test Test Form 결과를 보면 폼에 Type text here라는 힌트가 나오는것을 볼 수 있다. readonly readonly는 사용자가 입력 / 편집을 못하게 막고, 읽기만 가능한 읽기전용 필드를 만들 때 사용한다. readonly를 위해서는 "디폴트 값"이라는걸 넣어주어야할 때가 있는데, 이때는 value속성에 값을 지정해 주면 된다. Test Test..
input 태그 input 태그에는 'type'이라는 속성이 존재한다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95 : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. developer.mozilla.org 이 타입은 여러가지 속성이 있지만, 그 중 항목을 선택하는 'radio'와 'checkbox'를 비교해 보고자 한다. 우선 이 두개 다 어떻게 출력되는지 보자. type = "radio" Radio Field Radio Field Test Yes No Su..
태그를 통한 이미지 링크를 만들때는 하나의 링크만 이미지에 걸수있는게 아닌 여러개의 링크를 이미지에 걸 수 있다. 이말은 즉 사진에서 위치에 따라 서로 다른 링크가 열리게 한다는 것을 의미한다. 이러한 것을 이미지 맵이라고 하는데 주로 이메일에서 많이 쓰인다. 이미지 맵 생성을 위해서는 태그와 태그가 사용되는데, 태그는 '이미지 맵'을 만드는 역할을하고 태그는 이미지 맵으로 사용할 이미지에 링크영역을 정해주기 위해 사용된다.태그 안에는 이미지 맵의 이름을 설정해 주기 위한 속성인 name을 작성해 준다. name 속성은 일반적인 태그에서 id속성과 비슷한 역할을 한다. 태그에는 다음과 같은 속성들이 존재한다. alt : 대체 텍스트를 지정한다. 태그의 alt와 동일한 기능.coords : 링크로 사용할 ..
우리는 태그와 href속성을 외부 사이트로 링크를 걸 수 있다. 1깃허브 링크cs 다음과 같은 예시라고 치면 href에 작성한 링크로 태그에 둘러져 있는 '깃허브 링크'를 클릭하게 되면 해당 링크로 들어가게 된다. 이러한 방식은 1이라는 사이트가 2라는 사이트로 링크를 하는 일반적인 링크 방법이다. 하지만 이러한 방식 말고 1이라는 사이트 안에서 링크를 걸 수 있는 방법도 있다. 이러한 방법을 앵커(Anchor)방식이라고 한다.앵커 방식은 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 해당 위치로 한번에 이동하는 방식을 의미한다. 앵커 기능을 사용하기 위해서는 이동하고 싶은 위치마다 id속성을 이용해서 앵커를 만들고 각각다른 이름을 지정해야 한다. 그 다음 붙여놓은 앵커 이름들은 링크를 만들때 처럼 태그..
Hoplin
'Web Basic/HTML' 카테고리의 글 목록