Web 개발/[HTML,CSS] (10) 썸네일형 리스트형 [HTML/CSS] 미니홈피 만들기 html/css 배운것을 토대로 간단한 미니홈피를 만들어보았다. https://zzuzzu0205.github.io/mini-homepage/home.html 2021 MINI HOMEPAGE TODAY 100 / TOTAL 24142 안녕하세요 코딩공부를 하고 있는 미래의 개발자입니다. 코딩을 공부하고 있지만 너무 어렵네요 ㅠㅠ 코딩중인 개발자 ＼(^0^)/ 파도타기 코뮤니티로 가기 인스타 가기 블로그 zzuzzu0205.github.io 처음 만들어본거라 소스코드가 매우 난잡하다 소스코드를 좀 더 가시적으로 표현하는 연습이 필요할 것 같다는 생각이 들었다. 위 홈피에 썻던 코드들은 깃허브에 따로 올려두었다. https://github.com/zzuzzu0205/mini-homepage GitHub -.. [HTML/CSS] 구글 클론 코딩 html과 css 공부 한 것을 기반으로 구글 웹페이지를 똑같이 따라해볼 것이다. #html 코드 Google 🔍 유튜브 네이버 블로그 코뮤니티 인스타그램 백준 #css 코드 .body{ background-color: white; } .title{ position: relative; top : 150px; font-size: 100px; text-align: center; font-family: 'Edu VIC WA NT Beginner' , cursive; } span:nth-child(1),span:nth-child(4){ color: blue; } span:nth-child(2),span:nth-child(6){ color: red; } span:nth-child(3){ color: yellow;.. [HTML/CSS] 8. Flex Flex flex는 레이아웃을 만들 수 있는 다양한 방법 중 가장 쉬운 방법이다. '남는 공간을 어떻게 차지할 것인지'라고 이해하면 된다. (공간의 배치) flexbox는 flex container와 flex item으로 구성된다. container는 item 들을 감싸는 역할이고 item은 각각의 요소이다. .container{ display:flex; } flex 레이아웃을 적용하기 위해선 컨테이너에 display: flex; 속성을 가장 먼저 설정해 줘야한다. 컨테이너에 display: flex;을 설정해야 아잉템에 다양한 flex 속성들을 이용할 수 있다. 배치 방향 설정하기 .container { flex-direction: row; flex-direction: column; flex-direc.. [HTML/CSS] 7. 도형만들기 css코드 div{ border-width: 10px; border-style: dashed; border-color: blue; width: 100px; height: 100px; } 출력결과 border를 이용하여 테두리를 만들 수 있다. border-width : 선 굵기 border-style : 선 모양 solid (실선) dotted (점선) dashed (대쉬선) double (이중실선) border-color : 선 색깔 css코드 div{ border: 10px double darkgreen; width : 100px; height: 100px; } 출력결과 css코드 div{ border-top : 10px solid deeppink; border-left : 10px dashed bl.. [HTML/CSS] 6. 단위와 위치 절대 단위 : 고정된 값을 출력 (출력장치의 물리적 속성을 아는 경우 효율적) → in, cm, mm, pt, pc 상대 단위 : 다른 요소의 크기에 영향을 받아 크기가 변함 (호환성을 유지하는데 유리) → em, ex, px, % 자주 사용하는 상대 단위 em : font_size, 해당 폰트의 대문자 M의 너비를 기준으로 함 ex : x-height, 해당 폰트의 소문자 x의 높이를 기준으로 함 px : pixel, 출력장치에 따라 상대적인 크기를 가짐 % : percent, 기본 글꼴의 크기에 대하여 상대적인 값을 가짐 위치 지정하기 1. static 모든 요소의 default 값이다. 포지션 속성을 따로 설정하지 않았을 때 자동으로 적용되는 것 가장 위쪽, 왼쪽에 배치된다. 2. relative .. [HTML/CSS] 5. 클래스 , 패딩과 마진 클래스 (class) css에 디자인 속성을 일일히 지정해 줘야 하는데 이런 귀찮음을 해소할 수 있는게 바로 '클래스' 선택자이다. class의 이름을 지정해줘야 한다. class 이름을 'lighter' 라고 하겠다. #html 코드 볼드체 #css 파일에서 클래스를 불러올 떄는 '.클래스명' 으로 입력 .light{ font-weight: lighter; } html에 bold 클래스 이름을 붙이고, css에서 위와 같이 실행하면 모든 bold 클래스가 두꺼운 볼드체로 적용된다. 패딩(padding)과 마진(margin) 패딩과 마진은 웹 페이지에서 여백으로 사용되는 요소이다. 패딩(padding) : 속을 넣다, 채워 넣다 마진(margin) : 여백, 여유' 파란색 부분이 콘텐츠, 초록색 부분이 .. [HTML/CSS] 4. css css란 웹 문서의 스타일 시트이다. html에서 웹에 관한 내용을 구성한다면, css는 디자인 역할을 맡고 있다. 폰트, 글씨 크기, 색, 도형, 정렬 등등 웹 페이지의 내용을 제외한 모든 디자인 부분 1. Inline Style Sheet 첫 번째는 html 태그의 속성에 css코드를 넣는 방법이다. 고양이는 귀여워 이라는 태그 안에 속성 값을 만들어 글씨에는 검은색, 배경에는 연두색을 적용하였다. 디자인 요소를 태그마다 하나하나 지정해 줘야 하기 때문에 한계가 있으며 재사용이 불가능하다. 2. Internal Style Sheet 두 번째는 안에 안에 css코드를 넣는 방법이다. 고양이는 귀여워 html 문서 안에 태그를 넣어 디자인을 적용했다. ( 태그는 보통 사이에 넣지만 어디에 넣어도 상관없다.. [HTML/CSS] 3. 중요태그 정리 자주 쓰이는 태그 1. 문장을 나누는 태그 1) 태그 (paragraph) : 문단을 지정하는 기능 2) 태그 (line break) : 줄을 바꾸는 기능 #코드 강아지 정보 1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다. 고양이 정보 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다 #출력결과 라는 태그를 쓰니 두 줄 사이에 공백을 두고 문단이 구분된다. #코드 강아지 정보 1.사람을 잘 따른다. 2.산책을 좋아한다. 3.너무 귀엽다. 고양이 정보 1.자기 맘대로 한다. 2.사람에게 순종적이지 않다. 3.매우 귀엽다 #출력결과 2. 범위를 나누는 태그 1) 태그 (division) : 영역을 나누는 기능 (한 페이지 내에서 영역을 지정해줌) 2) /a> 형식으로 작성된.. 이전 1 2 다음 목록 더보기
