프로그래밍 언어 활용 12일차 (24/11/26)

CONTENTS

 

CSS Practice

1. 랠리 테스트

2. HTML&CSS 작업순서

3. 홈페이지 레이아웃 : header, nav 부분 정렬

 

------------------------------------------------------------------------------

 

CSS Practice

 

1. 랠리 테스트

	문항	답변
1	다음의 선택자의 특징을 서술할 수 있다. 타입선택자 아이디선택자 클래스선택자 전체선택자 하위(후손)선택자 자식선택자 인접선택자 형제선택자	타입선택자 : 특정한 HTML요소들 혹은 요소를 선택함 p{ color:blue;} 아이디선택자 : 특정 ID를 가진 요소를 선택함 #myp{ color:blue;} 클래스선택자 : 특정 클래스를 가진 요소들 혹은 요소를 선택함 .myp{ color:blue;} 전체선택자 : 주로 초기화시 사용함 *{ color:blue;} 하위선택자 : 자손 혹은 자식을 선택함 p a{color:blue;} 자식선택자 : 직계 자식을 선택함 p > a { color:blue;} 인접선택자 : 형제 요소중 바로 다음 요소를 선택함 p + a{ color:blue;} 형제선택자 : 형제요소들 중 선택함 p ~ a { color:blue;}
2	다음의 가상선택자에대해서 설명할 수 있다. a:link a:visited a:hover a:focus a:active	a:link : 방문하기 전의 a 태그의 CSS를 적용 a:visited : 방문이후에 a 태그의 CSS를 적용 a:hover : 요소에 마우스가 올려졌을 때 적용 a:focus : 요소가 포커스를 받을때 , 주로 폼에서 적용 a:active : 요소가 활성화 되었을때 적용, 클릭할때 적용
3	부모가 자식을 정렬하는 방법중 flex를 사용하는 방법에 대해서 모두 설명하시오.(가로/세로)	1) 가로 펼치기 display : flex; justify-content : flex-start / center / flext-end space-around / space-between/ space-evenly align-items : center; 2) 세로로 펼치기 display : flex; flex-direction : column; justify-content : flex-start / center / flext-end space-around / space-between/ space-evenly align-items : center;
4	부모가 자식을 정렬하는 방법중 text를 정렬하는 방법에 대해서 설명하시오.	text-align: center; line-height: 부모 height px;
5	특정태그를 absolute로 변경하여 부모를 지정했다고 가정했을경우 그부모의 영역에서 가로세로 센터로 위치하는 방법을 설명하시오.	position: absolute; top : 50%; left: 50%; transform : translate(-50%, -50%);
6	Border와 컨텐츠가 너무 가깝게 붙어있을경우 사용할 수 있는 명령어는?	padding
7	스스로 위치를 조정할 때 사용할 수 있는 정렬 명령어는 무엇인가?	padding, margin, tansform: translate();
8	백그라운드에 abc.jpg라는 이미지를 표시하려면 어떻게 코드를 작성해야하는가?	background-img: url("상대경로/파일명");
9	백그라운드 이미지가 스크롤과 분리되어 고정되어 동작하게하려면 어떻게 해야되는가?	background-attachment: fixed;
10	백그라운드 의 사이즈를 비율을 지키면서 가로기준으로 배치하려면 어떻게 해야하는가?	background-size: cover;
11	특정 태그의 자식이 넘치면 보여주지 않게 하려면 어떤 명령어를 사용해야하는가?	overflow: hidden;
12	투명도를 조절하려면 어떤 명령어를 사용해야 하는가?	opacity: 0.8;
13	특정 애니메이션이나 색상이 변경되거나 크기가 변경될때 부드럽게 1초동안 바뀌게 하려면 어떤명령어를 입력해야하는가?	transition: all 1s;

 

*display: flex 개념 다시 정리하기/ 블록 위치 배열 하는 것 

 

 

2. HTML&CSS 작업순서

Step	Side Step	작업명	내용
1. 화면 디자인	1	사이트 캡쳐	GoFullpage를 사용하여 제작할 사이트를 캡쳐한다
	2	Boxing	화면을 네모 칸 가로 혹은 세로로 묶음 단위로 박스 처리한다
2. HTML코드 구성 외부파일연결	1	프로젝트 폴더생성
	2	img폴더 생성
	3	HTML파일생성	!+enter를 통하여 기본 구조 코드를 자동으로 생성한다.
	4	CSS파일생성
	5	폰트어썸 연결
	6	구글폰트연결
	7	CSS파일연결
	8	DOM Tree 그리기	구조도를 그린다. 1) html tag 선정하는 목적 2) 부모-자식 관계 명확히 함 : CSS에서 부모에게 영향받는 속성 참고하고자 3) JS : 부모-자식 관계 파악하고자
	9	HTML 코드 입력
	10	링크여부
	1	초기화CSS	*{ margin:0; padding:0; text-decoration : none; list-style:none; box-sizing:border-box; color: inherit;}
3. CSS	2	부모가 자식정렬	display:flex -> 하위 flex, align, justify 관련 속성들
	3	자기자신 정렬
			position
			transform:translate()
			margin, padding
	4	크기	width, height (px, %)
	5	백그라운드
	6	표시여부
	7	Border
		Display 성질변환
		Overflow
		Opacity
	8	문자스타일, 문단스타일
	9	hover
		rotate, scale
		transition
		keyframe

 

3. 홈페이지 레이아웃 : header, nav 부분 정렬

-display: flex; 정렬 후

 자식요소들 간격 띄우기: margin-right: px;, margin-left px;

<style>

  .header_right a, .header_right img{

  margin-right: 10px;

}

</style>