본문 바로가기

분류 전체보기364

아이콘 붙이기 / Font Awesome 아래와 같은 아이콘을 불러와서 아이콘 색과 크기를 변경해 보자. 아이콘 불러오기 1. Font Awesome에서 회원가입(무료)을 해야한다. 유료로 있긴하지만 난 무료만 사용하고 있다. Font Awesome 링크 https://fontawesome.com/ 2. 회원 가입을 하면 CDN 주소을 주는데, 이 CDN을 복사해서 내 html head에 붙여 넣는다. 3. 그리고 나서 원하는 아이콘을 검색한 후 마음에 드는 아이콘을 클릭한다. 4. 아이콘 주소를 복사한다. 5. html 원하는 자리에 붙여넣기 한다. 아이콘 삽입 전 아이콘 삽입 후 아이콘 크기 조절 사이트에서 제공하는 크기를 참고해서 원하는 사이즈를 클래스 안에 적어준다. 아이콘 색 변경 아이콘 색을 바꿀 때는 따로 클래스 이름을 지정해 주고.. 2021. 7. 19.
html] div 태그 div 태그 만약 내가 html에서 I'm Hanoona. 를 만들면 css에서 각 element는 box 형태로 보기에 해당 글자에 박스가 하나 만들어진다. 내가 html에서 a programmer. 를 만들면 또 a programmer. 해당 글자에 박스가 만들어진다. 이렇게 만든 두 박스에 내가 같은 배경색을 넣고 싶다면? 일일이 박스 하나 하나에 효과를 넣는 것이 아니라 두 박스를 담은 더 큰 박스를 만들어 효과를 주면 개고생을 좀 면할 수 있다. 이렇게 여러 박스를 묶어서 더 큰 하나의 박스를 만들 때 div 태그를 이용한다. 이 과정을 코드로 작성해 보자. 1. div로 감싸면 하나의 박스로 감쌀 수 있다. div에 효과를 주면 하나로 묶여서 효과를 받는다. 2. div에 효과를 주어 두 문장.. 2021. 7. 19.
Bootstrap] 버튼 만들기 부트스트랩 버튼 만들기 클래스에서 btn을 입력하면 부트스트랩 버튼을 불러온다. 부트스트랩 버튼 색지정 부트스트랩 위 색깔 표를 보면 각 색마다 이름이 정해져 있다. btn-primary 클래스를 추가하면 이미 설정된 파란색이 나온다. Primary 파랑색 Secondary 회색 Success 녹색 Danger 빨강색 Warning 노랑색 Info 하늘색 Light 흰색 Dark 검은색 Link 링크 밑줄 원하는 색이 없을 때 사용자 색 지정 1. 새로운 클래스(card-btn)를 하나 만들고 css에서 따로 설정해 준다. 2. 그 전에 html head에서 css 링크가 bootstrap 링크보다 아래 위치해 있어야 css가 적용된다. 3. css에서 원하는 색 지정한다. 4. 결과물 보더로만 버튼 만.. 2021. 7. 18.
Bootstrap] container/ container-fluid container 반응형으로 설정된 박스 화면 사이즈 바뀌면 알아서 반응형으로 박스 사이즈도 변형해 준다. 여유 공간도 알아서 바뀌는데 이게 싫을 수 있다. 화면을 꽉차게 해서 내가 원하는 만큼 padding을 주는 것이 더 편리하다. 전체가 꽉차게 하려면 container-fluid를 사용해야 한다. padding은 css에서 준다. container-fluid 화면의 사이즈 변경할 때 마진 없이 꽉참. 항상 width가 100% css에서 여유 공간을 따로 설정할 수 있어 통제가 가능하다. 전체 화면에서 여유 공간주기 내용물들을 큰 박스에 담아 container-fluid를 먼저 주고 나서 css에서 여백 크기를 조절하면 전체 여유 공간 조절하기에 편하다. css에서 위아래, 양옆으로 패딩주기 Boo.. 2021. 7. 11.
Bootstrap] 반응형 만들기 Grid Layout system 반응형이란? 데스크탑-> 태블릿-> 모바일 화면 사이즈가 바뀔 때 화면 배열도 바뀌는 것을 말한다. Bootstrap은 반응형을 만들기 쉽다. 반응형 예시 데스크탑 화면 - 사진 4개 나옴 태블릿 화면 - 사진 3개 나옴 폰 화면 - 사진 2개 나옴 코딩하기 html head에 bootstrap을 연결해준다. bootstrap 홈페이지에 들어가 Get Startd에 들어가면 나오는 아래 내용을 html head에 넣는다. 클래스를 col로만 주었을 때 element 넣은 갯수 만큼 알아서 균등하게 자리를 차지한다. 화면을 줄여도 사이즈는 변하지만 아래줄로 떨어지는 것 없이 그대로 같이 붙어 있는다. 화면을 줄였을 때 클래스를 col-숫자로 주었을 때 클래스를 col-6, col-4, col-3,, 등 c.. 2021. 7. 9.
Bootstrap] 메뉴바 만들기 (네비게이션바) 메뉴바로 가기 부트스트랩에서 docs -> components -> navbar 들어가기 쭉 보면서 마음에 드는 메뉴바 선택한다. navbar(메뉴바) 만들기 navbar -> nav 선택 nav-item : 기본적으로 vertical로 설정되어 있음 navbar-expand : nav-item이 기본적으로 vertical로 설정되어있는 것을 가로로 바꿔줌. navbar-expand-lg : large 데스크탑 사이즈로 볼 때 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-md: medium 태블릿 사이즈까지 메뉴가 가로로 다 보이고 화면 접으면 메뉴 햄버거 버튼으로 들어감. navbar-expand-sm: small 폰 화면 사이즈까지 가로로 메뉴가 다보임.. 2021. 7. 8.
웹디자인에 도움되는 사이트 dribble 색에 따른 디자인등 여러 디자인을 볼 수 있다. https://dribbble.com/?color=E8B730 UI patterns 여러 디자인들 볼 수 있다. http://ui-patterns.com/patterns/Carousel/examples Awwwards. 상받은 디자인이나 다른 프리랜서들의 디자인도 볼 수 있다. https://www.awwwards.com/awwwards/collections/freelance-portfolio/ Sneakpeekit 여러 기기에 화면 디자인 할 수 있는 그리드 제공. 다운받아서 사용 가능. https://sneakpeekit.com/ balsamiq.cloud 여러 기기에 디자인 편하게 할 수 있음 https://balsamiq.cloud/ 2021. 7. 7.
Bootstrap 시작 Bootstrap 트위터에서 무료로 배포한 프리, 오픈 소스 Github에서 두번째로 많은 별을 받은 repository이다. Responsive 기기에 따라 보여 지는 화면 사이즈가 다르다. 그 화면 사이즈에 맞게 레이아웃이 변하는 것을 말한다. adaptable layout Pre-styled Elements 미리 만들어진 것을 복사 붙여넣기 해서 사용한다. Bootstrap 다운로드 https://getbootstrap.com/docs/5.0/getting-started/download/ 다운로드 받으면 dist 파일이 뜨고, 그 안에 보면 css, js 파일이 있다. css 파일에 들어가서 bootstrap.css를 vscode로 열면 이미 정해놓은 css 효과들을 볼 수 있다. 거기에 있는 클래.. 2021. 7. 6.
숀할핀 사이트 클론 2 html DOCTYPE html> Hanoona I'm Hanoona a programmer. Hello I'm a web developer. I'm the founder of the HaNooNa. I like to watch Korean movies and verieties. My Skills Lorem & Ipsum Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros. Lorem Ipsum Dolor Lorem ipsum dolor sit amet, mauris sed c.. 2021. 7. 6.
CSS] float, clear float 사용하기 사진을 왼쪽으로 글씨를 오른쪽으로 위치하고 싶을 때 table을 만들지 않고, float로 할 수 있다. css에서 해당 이미지에 float: left;로 줘서 이미지를 왼쪽으로 가게 하고, 오른쪽 마진을 30px 만큼 주었다. clear 사용하기 이미지 옆에 타이틀은 놔두고, 내용은 밑으로 보낼 때 밑에 보낼 내용을 html에서 클래스로 지정해주고 css에서 그 클래스에 clear: left; 를 준다. clear는 float를 무효화한다. 2021. 7. 5.
CSS] 사이즈 px, %, em, rem 고정된 사이즈 px font-size: 90px 픽셀은 다이나믹 사이즈가 아니다. 고정된 사이즈로 기기 설정에서 폰트를 크고, 작게 하거나 화면을 크고, 작게 만들어도 그에 맞게 변하지 않는다. 다이나믹 사이즈 % font-size: 100%; 이라고 설정하면 기본 값은 16px이다. 90px만큼 원한다면 90/16 = 562.5 % 정도가 된다. font-size: 562.5%; 로 해주어야 한다. em html에서 em태그는 emphasize로 글자를 이탈릭 사이즈로 바꿀때 사용하였지만 크기를 조절할 때는 완전히 다르다. 여기서 em은 M을 발음하는 것이고 예전에 M사이즈 만큼을 말했다고 한다. 지금은 1em(M)= 16px이다. 90px을 원하면 font-size: 5.625em; 또는 %으로 설정.. 2021. 7. 5.
CSS] 폰트 종류, 구글 폰트 연결하기 폰트 자주 쓰는 폰트 1. Serif: 끝에 장식이 들어간 형태이고 2. Sans-serif: 끝 장식이 없는 형태이다 3. monospace: 각 알파벳마다 같은 가로 길이를 가지고 있다. 4. Cursive: 손글씨 느낌 5. Fantasy https://www.w3schools.com/css/css_font.asp Web safe fonts 모든 브라우저와 디바이스에 설치되어 있는 폰트 fallback fonts, font family 내가 설정한 폰트가 디바이스에 없으면 그 다음에 적은 폰트를 찾으라고 설정해 놓다. css에서 font family를 이용하여 우선 순위 대로 나열한다. Tahoma 폰트가 1순위이고 이 폰트가 없으면 Verdana가 2순위 이 것도 없으면 sans-serif 사용... 2021. 7. 5.
CSS] 마진 margin 갯수 설정 자세한 사항 margin/mdn https://developer.mozilla.org/en-US/docs/Web/CSS/margin 벨류 1개 일 때 : 4면 모두에 적용 벨류 2개 일 때 : 위아래 / 양옆 벨류 3개 일 때 : 위 / 양옆 / 아래 벨류 4개 일 때 : 시계 방향 - 위 / 오른쪽 / 아래 / 왼쪽 2021. 7. 4.
CSS] position 속성/ static, relative, absolute, fixed 밸류 알아보기 Postion을 배우기 전에 먼저 html 기본 포지셔닝을 알고 있어야 한다. HTML 기본 설정된 포지셔닝 먼저 html에서 기본 설정되어 포지셔닝은 무엇이 있는지 알아보자. 1. 컨텐츠 사이즈에 따라 박스 사이즈가 결정된다. h1~h6, p 등처럼 기본 설정이 block인 경우에도 가로 길이는 컨텐츠 길이와 상관없이 화면 끝까지 길지만, 세로 길이는 컨텐츠에 따라 길이가 결정된다. 이미지등은 가로, 세로가 이미지 크기에 따라 박스 사이즈가 결정된다. 2. 코드가 위에서부터 아래로 내려가는 순서대로 화면 디스플레이도 순서대로 나타난다. 3 자식 태그는 부모 태그 위에 보여진다. 부모 태그(div)는 보라색 자식 태그 (h1)은 황토색인데 황토색이 먼저 보이고, 보라색이 그 밑에 깔려있다. 자식태그가 우.. 2021. 6. 29.
CSS] display 속성 / block, inline, inline-block, none Display 속성 display는 컨텐츠(element)의 가로 길이를 정하는 속성이다. block, inline, inline-block, none 4가지 벨류에 대해 알아보자. display의 밸류 4가지 1 Block 가로 길이(width)가 화면 전체를 차지한다. 기본 설정이 block으로 지정되어 있는 태그 html에서 h1을 입력해보면 글자는 몇 개없는데 가로 길이는 화면 끝까지 차지하는 것을 볼 수 있다. html에서 h1은 가로 화면 꽉차게 차지하라고 기본 설정 되어있다. 가로길이가 화면 끝까지 차지하면 그 옆에 다른 컨텐츠가 올 수 없다. h1은 가로 길이가 화면 끝까지 차지하기에 다른 element를 h1 옆으로 나란히 놓을 수 없다. 다른 element는 다음 줄로 내려간다. Hel.. 2021. 6. 28.
CSS] box, padding 알아보기. box란? html에서 하나의 내용을 입력하면 자동으로 박스가 만들어진다. 이 박스는 내용을 감싸고 있다. CSS에서 효과 줄 때 유용하게 사용된다. element, padding, border, margin 란? 이 박스 안에는 4가지 요소가 들어있다. element, padding, border, margin 1. element element는 입력한 내용물이다. 텍스트를 입력하면 텍스트가 element이다. 이미지를 입력하면 이미지가 element이다. 2. Padding 패딩은 내용물과 보더 사이의 공간이다. 패딩을 위 아래 양 옆 모두에 100px씩 넣어주면 내용물과 박스 경계선과의 사이가 벌어지고, 글자도 모아지고 박스도 커지게 된다. 패딩 없을 때 패딩 넣었을 때 각각 값을 따로 주고 싶을 .. 2021. 6. 28.
숀할핀 사이트 클론 1 1. "My site" 이름의 폴더 만들기 2. index.html 파일 만들기 3. html backbone과 타이틀 만들기 4. css 폴더 만들기 5. html에서 css에 링크 걸기 6. favicon 만들기 - favicon 만들 수 있는 사이트에서 다운로드 하고 링크 걸기 7. 각각의 html element는 각 하나의 박스이다. 문구 위에 박스 만들기 8 아래 두 문구를 같은 박스에 넣기 - div 사용하는 이유 위 경우는 각각 박스가 만들어져서 2개의 박스가 따로 움직이게 된다. 이런 경우 div로 감싸주면 하나의 박스 안에 들어가게 된다. div는 css에서 사용하기 전까지 아무 기능이 없다. 9 바디 태그에 있는 마진 없애기 이미지와 텍스트 모두 가운데 정렬하기 h1 편집 h1에 wid.. 2021. 6. 26.
에러 확인하는 법: console에서 확인 Console 들어가는 법 1 view-> Developer -> Developer Tools -> Console 확인 2 F12 -> Console 3 화면 오르쪽 클릭 -> inspect -> Console console에 들어가면 현 페이지에 대한 에러 메세지를 볼 수 있다. 2021. 6. 23.
hr 효과주기 / 여러 군데에 있는 태그에 같은 효과 넣기 여러 태그에 같은 효과 넣기 브라우저에 가로줄 는 이미 여러개가 있는데 html에서 효과 넣을려면 을 일일이 찾아서 효과를 넣어줘야 한다. 이런 경우 에러가 날 확율이 높고 시간도 걸리고 번거롭다. CSS에서 한 번에 바꿔 주는게 효과적이다. CSS에서 바꾸고자 하는 태그를 적어주고, { } 안에 변경 사항을 적어준다. 흰색 긴 라인으로 바꾸기 의 색을 바꿀려서 background-color: white;로만 원하는 색을 써준다고 색이 바뀌지 않는다. background는 보더를 뺀 가운데 알맹이를 말한다. border 자체도 박스로 되어있다. 디폴트로 위아래 양 옆으로 1px씩 inset 형태로 기본 색이 들어가있다. 그래서 border를 없애고 나서 순수 background에 height를 줘서 눈에.. 2021. 6. 23.
코딩할 때 알아두면 좋은 사이트와 정보 ✔️ 프로그래밍 언어 태그 설명 1. devdocs https://devdocs.io/ 2. 모질라 https://developer.mozilla.org/en-US/ 구글 검색할 때 내용 쓰고 뒤에 mdn 붙이면 모질라 내용 검색됨 ✔️ WaybackMachine https://archive.org/web/ 예를들어 naver 치면 예전 처음 개시할 때 화면부터 어제 화면까지 볼수 있음. 날짜 시간별로 보면 이 사이트의 역사가 보임. ✔️ Pesticide 구글 크롬 익스텐션으로 설치한 후 개발자모드로 체크하거나 Allow access to file URLs를 켜두기 ✔️codepen 간단히 코딩 확인 https://codepen.io/pen/ ✔️codeply bootstrap 등이 됨 https://.. 2021. 6. 22.
CSS 시작/ external CSS 유용한 사이트 Pesticide 구글 크롬 익스텐션으로 설치한 후 개발자모드로 체크하거나 Allow access to file URLs를 켜두기 CSS Default Browser 브라우저에 기본적으로 깔려있는 CSS 효과 https://www.w3schools.com/cssref/css_default_values.asp MDN reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference 디자인 참고 션할핀 개인 홈피 https://www.seanhalpin.design/ CSS 시작하기 CSS는 HTML으로 만든 기본 골격에 스타일을 넣기 위해 사용한다. HTML에서도 색을 바꾸거나 하는 스타일을 변경할 수 있기는 하다. 만약 HTML에서 .. 2021. 6. 22.

티스토리툴바