CSS 6

css 기초 개념 정리

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 text-decoration-line none : 꾸밈 없음 underline : 텍스트 아래 밑줄 overline : 텍스트 위에 줄 line-through : 텍스트 중간 선 text-decoration-color 라인의 색 text-decoration-style 선의 모양 solid: 굵은 선 wavy : 물결모양 dotted : 점선 dashed: 짧은 막대선 double: 이중선 font 크기 font-weight: normal; 과 font-weight: 400; 과 같고 font-weight: bold; 과 font-weight: 700;은 같음 굵기는 100 ~ 900 까지 있음 ( 100 단위 ) 폰트에 따라 지원되는 크기는 다름 div..

[HTML/CSS] 베라 모바일 웹 애플리케이션 만들기

5,6월부터 웹 개발공부를 조금씩 해 나갔지만 다른사람들과 힘을 합쳐 만들어본 경험은 처음이다. 어떻게 보면 첫 프로젝트이자 포트폴리오라 할 수 있지만 (내가 한 부분은) html/css 밖에 안들어갔고 아직은 많이 부족해서 조금 민망하다.. js는 swiper만 조금 들어갔다 ,,^^,,,, node.js를 이용해 서버에 올리는거까지 해야 최종 마무리지만 아직 미숙한 실력탓에 도움이 별로 못 되었다. 내 첫 프로젝트는 서버에 대해서도 정말 많이 공부해야겠다고 다짐하게 만들어줬다 ..! 왼쪽이 내가 만든거고 오른쪽이 실제 베라 웹 모바일 버전이다. 메인 페이지를 제외하고 추가로 기능이 들어가있는 페이지 3,4개를 더 만드는게 목표였기때문에 메인페이지, 로그인, 회원가입, 사이드메뉴, 메뉴 소개 사이트를 ..

만들어보기 2021.08.22

[HTML/CSS] CSS 파일을 적용하는 방법

CSS는 웹 사이트의 스타일링을 담당하므로 빼놓을 수 없는 요소다. HTML에 적용하는 3가지 방법에 대해서 알아보자 :D 1. 내부 스타일 시트 ( 에 입력 ) class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 그동안 올린 게시글에서 항상 썼던 방식이다. html파일 안 에 있는 태그 안에 적으면 된다. 2. HTML 태그에 적용하기 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만 가능하다. 대신 고유성을 줄 수 있다. 직접 태그 안에 style=""을 적어서 입력하는 방식이다. 개인적으로는 지저분해 보이고 한 눈에 안 들어와서 별로 안 좋아하는 방식 ! 3. 외부 스타일 시트 마지막 방법은 직접 ..

[HTML/CSS] 기초 개념 ③ 클래스(class), 아이디(id)

클래스 지정하기 클래스는 보통 효과를 따로 주고싶을 때 사용한다 클래스 사용하기 /*클래스 이름은 first*/ class = "클래스 이름" 을 입력하고 클래스 사용하기 두 개의 클래스를 사용하고 싶다면 class=" 클래스 이름명1 클래스 이름명2" 처럼 띄어쓰기만 하고 적어주면 된다 아이디(id) 사용하기 클래스는 . 을 쓰지만 아이디는 #을 적는다. 아이디를 배워보자 이렇게만 보면 .과 #의 차이빼고는 비슷해보이지만 클래스는 중복이 가능하고 아이디는 중복이 불가능하다는 차이점이 있다. 클래스는 여러 태그에 붙여서 연관성과 통일성을 부여할 때 활용할 수 있고 아이디는 하나의 태그에만 붙여서 고유성을 줄 수 있다. 예시 class와 id class: 여러개를 묶어서 효과지정이 가능하다. id: 하나만..

[HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬..

웹사이트에 링크 넣는 법 HTML에 대해서 알아보자 구글 위의 코드처럼 주소이름을 입력하면 된다. 주소 이름 부분에는 내가 원하는대로 적으면 된다 !여기서 탭이 따로 열리길 바란다면 target="_blank"을 덧붙이면 된다. 웹사이트에는 이렇게 반영되는 것을 볼 수 있다. 만약에 웹사이트가 아닌 내가 가지고 있는 html파일로 이동하길 원한다면 파일경로를 적어줘야한다. 파일이름 을 입력하면 된다. 대신 자신과 같은 폴더에 있는 html파일로 이동할땐 따로 폴더명을 안 적어도된다 ! 저 위에 practice.html가 그 예시이다. 하지만 폴더가 다를 경우는 경로를 다 적어줘야한다. 또한, 자기자신에게 링크를 걸때는 17번줄처럼 #만 입력하면된다. 웹사이트에 이미지 넣는 법 난 저작권이 없는 무료이미지..

[HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ...

HTML/CSS 이란? ● HTML [HypertextMarkupLanguage] : 웹 문서를 만들기 위한 기본적인 언어 ● CSS [cascading style sheets]: 웹 문서의 전반적인 스타일을 저장해둔 스타일 시트 HTML 기본 태그 (요소) : 웹 브라우저에게 HTML버전을 알려주는 역할 ( 적을시, 자동으로 html5 사용) : 웹 사이트의 제목 : 가장 큰 머리말 (heading 1) : 두 번째로 큰 머리말 (heading 2) : 문단 HTML 기초 태그 : 텍스트를 굵게 만들어줌 ( bold ) HTML을 배워보자 : 텍스트를 날려줌 ( italic ) HTML을 배워보자 : 태그와 똑같이 굵게 표시됨. 감싸고 있는 텍스트가 중요하다고 표시하는것이 목적임 : 태그처럼 날려써짐...