본문 바로가기
728x90

HTML-CSS7

[css] 글, 이미지 가운데 정렬 세트 + body 여백 없애기 설정 [css] 글, 이미지 가운데 정렬 세트 + body 여백 없애기 설정 가운데 정렬을 위한 display, direction, content, align 설정 display: flex; flex-direction: column; justify-content: center; align-items: center; body 여백 없애주기 왜? : HTML 태그의 기본적인 여백을 없애줘야 편하기 때문이다. body, h1, h2, h3, h4, h5, h6, p { margin:0; padding:0; } 밑줄 효과 css 설정 .title { text-decoration: underline; } text-decoration 종류 underline : 밑줄 긋기 overline : 텍스트의 위에 밑줄 긋기 li.. 2022. 2. 3.
간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap) 간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap활용) HTML, CSS, Bootstrap 바탕으로 간단한 쇼핑몰 페이지를 만들어 보았다. (우선은 한 페이지) 기획서를 참고하여 필요한 부트스트랩 중, div class="input-group", option(갯수) 선택할 수 있는 select 등 이미지는 css에서 background-img로 삽입해 주었다. 마지막으로 간단하게 주문하기 버튼을 눌렀을 때, JavaScript로('주문이 완료되었습니다!')기능까지 넣어주어 아주 간단한 원페이지 쇼핑몰 완성! 간단한 쇼핑몰 페이지 코드 행복을 팝니다 가격:1,000원/개 행복한 순간을 담을 수 있는 곳은 우리의 머리, 가슴 그리고 또 하나, 사진이 있죠 당신의 행복한 순간을 사진에 .. 2021. 12. 28.
부트스트랩 활용해 간단한 메모장, 게시판 만들기 나만의 메모장, 게시판 만들기 (Feat. HTML & CSS + 부트스트랩) 부트스트랩 bootstrap 활용하기 Bootstrap 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것으로 다른 사람이 완성한 부트스트랩을 가져다 내 HTML 파일에 적용한다고 할 수 있다. 부트스트랩 활용을 위한 기본 템플릿 형태 본문 내용 넣기 ! 부트스트랩 페이지에서 jumbotron, card-columns 의 형태를 가져와 메모장/ 게시판을 만들었다. https://getbootstrap.com/docs/4.0/components/alerts/ 활용하기 에 들어가는 갯수를 원하는만큼 입력하여 다양한 모양으로 나타낼 수 있다. 간단한 메모장, 간단한 게시판 만들기 코드 Hello, This is Jann's world! .. 2021. 12. 27.
HTML과 CSS를 활용해 기본 로그인페이지 만들기 HTML, CSS 로그인페이지 만들기 HTML, CSS의 기본 태그들을 활용해 로그인페이지를 간단하게 만들 수 있다. div, input, button 태그 등이 차례로 쓰였는데, div 범위 확인을 위해 backgroung-color:green; 지정한 경우다. 크기를 조정하고, div를 가운데로 위치 시켜 화면에 가운데 위치할 수 있게 해준다. 구글에서 적용 가능한 한글 폰트 적용한 기본 로그인페이지 예시 로그인페이지 아이디, 패스워드를 입력해주세요 ID : PW : 로그인하기 background-image: url ("사진 경로"); background-image:url을 지정하여 원하는 사진으로 로그인페이지를 다양하게 만들 수 있다. background-image: url("/HJ.jpg"); 2021. 12. 23.
HTML / CSS 기본 태그 사용법 '기본기, 기초가 중요하다'는 말은 너무 익히 들어 누구나 아는 말 일터. 하지만, 막상 '중요한 것= 어려운 것' 이란 착각 또는 오해를 자주 하다, 최근에 먼 길을 돌아서야 기초와 기본을 다시 제대로 해야겠다는 결심과 함께 기본기부터 공부 하고 있어 정리해본다. 그런 차원에서, HTML과 CSS의 기본 태그들의 중요성은 두말하면 입 아픈 이야기들! 웹(Web)이 동작하는데 있어서 각각의 특징에 익숙해져야 한다. 그 중에서 가장 많이 만나는 3대장! HTML, CSS, JavaScript! HTML - 뼈대, CSS -꾸미기, JavaScript - 움직이는 부분 HTML / CSS 기초 태그 사용하기 HTML - div (division): 구역을 묶어주는 친구 - P (paragraph) : 문단 .. 2021. 12. 22.
[HTML/CSS] 블록(Block)과 인라인(Inline) 속성 비교 HTML 블록 속성과 인라인 속성 HTML 웹 표준 준수하는 기본 규칙으로써 블록(block) 요소와 인라인(inline) 요소를 구분 블럭요소 (Block Level Elements) : 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태를 블록요소라 한다. 블록 요소에 들어가는 요소들로는 h1~h6 요소, p 요소, div 등이 있다. - 블럭 요소의 형태는 한 행 전체를 포함하기에, 줄 바꿈이 일어난다. - 보통의 블럭 요소는 블럭 요소와 인라인 요소 모두 포함할 수 있다. 인라인요소 (Inline Elemets) : 블록 요소와 반대 되는 형태로 줄 바꿈이 일어나지 않는 요소로, 주로 문장 안에서 사용하는 태그의 기본값으로 a, img, strong, span.. 2021. 10. 13.
728x90