html24 [Web] CSS 기초 2 - ( week 1) 자주 사용하는 css를 사용해서 로그인 페이지를 꾸며보도록 한다. 예제에는 이미지가 들어가 있고 그 안에 텍스트가 들어가 있는 형태이다. 그리고 그 아래 아이디와 비밀번호를 입력하는 공간이 있고 그 아래 버튼이 있다. 이미지를 넣기 위해서는 공간이 필요한데 이럴 때 필요한 것은 div 태그이다. 우선 공간을 마련하고 그 안에 텍스트를 넣어본다. .mytitle{ background-color: green; color: white; } Login Page Please input ID and Password ID : PW : Login div 태그로 공간을 만들고 그 안에 h1, h5 태그로 텍스트를 넣어준다. div에 class를 지정해서 수정하여 그 안에 텍스트들이 함께 효과가 적용되도록 한다. 그리고 .. 2023. 4. 6. [Web] CSS 기초 1 - ( week 1) CSS html이 웹 페이지의 뼈대를 만드는 역할은 한다면 css는 꾸미는 기능을 한다. 특정 html의 태그를 꾸미기 위해서는 우선 어떤 태그를 꾸밀것인지 특정 시키는게 필요하다. 방법은 태그의 class 속성을 사용해서 원하는 문자열로 이름을 지정하고 이를 사용해 태그를 특정할 수 있다. ~ .mytitle{ color : red; font-size: 40px; } Login Page ID : PW : Login h1 태그에 class 속성으로 이름을 지정하고 해당 이름을 가지고 css로 꾸민다. 태그는 css를 사용하여 웹 페이지의 스타일을 정의하는 태그이다. 이러한 태그를 head에 정의하는 이유는 웹 브라우저가 문서를 로드할 때 head 태그 내에 있는 요소들을 먼저 읽어들이기 때문에 이러한 부.. 2023. 4. 6. [Web] Sample - ( week 1) 로그인 페이지 만들기 예제를 보고 html 태그를 사용해 페이지를 따라 만들어 본다. login.html 파일을 생성하고 여기에서 로그인 페이지 구현을 한다. Login Page ID : PW : Login 제목을 넣기 위해서 h1 태그를 사용하고 아이디와 패스워드를 입력할 input 태그도 사용한다. 그리고 로그인 버튼을 만들기 위해서 button 태그를 추가한다. 현재 상태에서 브라우저를 확인해 보면 가로로 태그들이 나열되어 있는 걸 볼 수 있다. 예제처럼 만들기 위해서 문단을 나누거나 구역을 나누는 태그들을 사용해 본다. Login Page ID : PW : Login 문단을 나누는 p 태그를 사용해서 id와 pw를 감싸주면 예제처럼 세로로 요소들이 나열된다. 2023. 4. 6. [Web] HTML 기초 - ( week 1) 구조 html 태그는 감싸고 있는 태그가 변경되면 내용물도 모두 영향을 받기 때문에 누가 누구 안에 있는지를 이해하는게 중요하다. red div 안에 green div, blue div가 들어있는 상태에서 red div의 위치를 이동시키면 안에있는 green과 blue 또한 함께 이동하게 되며 마찬가지로 green div 의 텍스트 색을 변경하면 안에 있던 버튼의 텍스트 색도 변경된다. 구성 DOCTYPE html> Documents HTML문서의 첫줄은 해당 문서가 어떤 버전의 HTML을 따르는지 나타내는 선언문으로 버전마다 선언방식이 다르다. 현재 선언된 방식은 HTML5 에서 사용되는 선언 방식이다. 꺽쇠안에 키워드가 적혀있는것은 요소 또는 태그라고 부르며 정해진 키워드마다 다른 기능을 가지고 있으.. 2023. 4. 6. 이전 1 ··· 3 4 5 6 다음
