Web

[CSS]Position 속성에 대해(absolute,relative,static,fixed,sticky)

Position이라는 속성은 CSS Layout을 도와준다. Layout.. Layout.. 레이아웃,많이 들어 봤는데 정확한 정의가 무엇일까. 정보를 잘 정리 정돈해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제입니다. 구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 합니다. (출처:http://www.tcpschool.com/html/html_space_layouts) 나누고 배치하는 것 즉,공간을 어떻게 구성할 것인지 고민해보는 것이라고 할 수 있을 것 같다. (Layout은 CSS뿐 아니라 HTML에서도 태그나 요소를 이용해 구성할 수 있다.) 그 중 CSS에서 유용하게 쓸 수 있는 Position 속성과 Flex 속성에 대해 정리해보고자 한다. fle..

[HTML] <input> 태그 정의/속성/예시 (hidden 속성에 대하여)

태그 정의 input 태그는 input뜻 그대로 사용자가 "데이터를 입력할 수 있는 필드"를 지정한다. input 태그는 가장 중요한 형식 요소로써 "어떤 유형의 속성"을 갖느냐에 따라 여러가지 방법으로 표현될 수 있다. 태그 attribute 속성들 type(필수 속성) 어떤 방식으로 입력받을 것인가에 대해 명시하는 것 위 사진에서는 button형이었다. button형 외의 type속성들은 밑에 일부 기술하겠다. name 서버로 보내질 이름을 입력하는 것으로 명시해주는 것을 뜻하는데 radio나 checkbox같은 경우 name을 통하여 가시성을 높일 수 있다. label reference를 보면 팁에 속성을 이용하라고 한다. 밑 코드와 같이 태그의 for=""을 이용하여 명시한 것은 태그에서 id="..

[HTML] <a> 태그 정의/용도/예시

태그 정의 태그는 기본적으로 '하이퍼링크'의 의미를 가진다. 가장 중요한 태그의 속성 중 하나는 href라는 속성인데,하이퍼링크를 통해 들어가지는 주소를 나타냄. Default 값으로 아직 클릭하지 않은 링크는 파랑색 글씨이며 밑줄이 쳐져있음. 방문한 링크는 자홍색(보라색)을 띄며 밑줄이 쳐져있음. 링크에 대해 마우스 우클릭을하면(Active Link) 빨간색을 띄며 밑줄이 쳐져있음. 알아두어야 할 점 태그에 href라는 속성이 들어가있지 않다면,오로지 placeholder일 뿐임. 링크로 접속하면 클릭한 브라우저에서 링크로 바뀜.(새 탭으로도 열 수 있음. 밑에서 추가 설명) Browser 호환 태그 부가적인 기능 이미지를 하이퍼링크로 사용하기 새 탭으로 링크 접속하기 같은 페이지이지만 다른 영역으로 ..