티스토리

Jann's World

검색하기

블로그 홈

Jann's World

jjungslife.tistory.com/m

The dots will somehow connect in my future :)

구독자: 0

방명록 방문하기

728x90

주요 글 목록

[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.. 공감수 0 댓글수 0 2022. 2. 3.
간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap) 간단한 쇼핑몰 페이지 만들기 (+ HTML, CSS, Bootstrap활용) HTML, CSS, Bootstrap 바탕으로 간단한 쇼핑몰 페이지를 만들어 보았다. (우선은 한 페이지) 기획서를 참고하여 필요한 부트스트랩 중, div class="input-group", option(갯수) 선택할 수 있는 select 등 이미지는 css에서 background-img로 삽입해 주었다. 마지막으로 간단하게 주문하기 버튼을 눌렀을 때, JavaScript로('주문이 완료되었습니다!')기능까지 넣어주어 아주 간단한 원페이지 쇼핑몰 완성! 간단한 쇼핑몰 페이지 코드 행복을 팝니다 가격:1,000원/개 행복한 순간을 담을 수 있는 곳은 우리의 머리, 가슴 그리고 또 하나, 사진이 있죠 당신의 행복한 순간을 사진에 .. 공감수 0 댓글수 0 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! .. 공감수 0 댓글수 0 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"); 공감수 0 댓글수 0 2021. 12. 23.
HTML / CSS 기본 태그 사용법 '기본기, 기초가 중요하다'는 말은 너무 익히 들어 누구나 아는 말 일터. 하지만, 막상 '중요한 것= 어려운 것' 이란 착각 또는 오해를 자주 하다, 최근에 먼 길을 돌아서야 기초와 기본을 다시 제대로 해야겠다는 결심과 함께 기본기부터 공부 하고 있어 정리해본다. 그런 차원에서, HTML과 CSS의 기본 태그들의 중요성은 두말하면 입 아픈 이야기들! 웹(Web)이 동작하는데 있어서 각각의 특징에 익숙해져야 한다. 그 중에서 가장 많이 만나는 3대장! HTML, CSS, JavaScript! HTML - 뼈대, CSS -꾸미기, JavaScript - 움직이는 부분 HTML / CSS 기초 태그 사용하기 HTML - div (division): 구역을 묶어주는 친구 - P (paragraph) : 문단 .. 공감수 0 댓글수 0 2021. 12. 22.
[HTML/CSS] 블록(Block)과 인라인(Inline) 속성 비교 HTML 블록 속성과 인라인 속성 HTML 웹 표준 준수하는 기본 규칙으로써 블록(block) 요소와 인라인(inline) 요소를 구분 블럭요소 (Block Level Elements) : 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 되는 형태를 블록요소라 한다. 블록 요소에 들어가는 요소들로는 h1~h6 요소, p 요소, div 등이 있다. - 블럭 요소의 형태는 한 행 전체를 포함하기에, 줄 바꿈이 일어난다. - 보통의 블럭 요소는 블럭 요소와 인라인 요소 모두 포함할 수 있다. 인라인요소 (Inline Elemets) : 블록 요소와 반대 되는 형태로 줄 바꿈이 일어나지 않는 요소로, 주로 문장 안에서 사용하는 태그의 기본값으로 a, img, strong, span.. 공감수 0 댓글수 0 2021. 10. 13.
[HTML/CSS] text-align 문자 정렬 border 테두리 속성 -text- align: center(left, right, justify) CSS text-align 속성은 문자(text) 텍스트의 정렬 방향 의미한다. text-align: left; 텍스트 왼쪽 정렬 text-align: right; 텍스트 오른쪽 정렬 text-align: center; 텍스트 가운데 정렬 text-align: justify; 텍스트 양쪽 정렬 -border: solid(dashed, dotted, border 속성은 태그의 테두리를 설정하는 속성으로, 세부 속성들을 한번에 쓸 수 있으며 width - style - color의 순서로 사용한다. (아래 코드 예시처럼 width 10px, style solid, color blue 일 경우 각각의 값만 차례대로 쓴다.) borde.. 공감수 0 댓글수 0 2021. 10. 12.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.