TechLabs

1. position이란? html 요소를 배치하는 방식을 결정하는 속성이다. position의 종류에 따라서 top, bottom, left, right 방향 기준으로 요소의 좌표값을 변경할 수 있다. position 속성을 이용하여 원하는 위치에 배정할 수 있다. 2. position 종류 - static : default - relative : 원래 있던 자리 기준으로 위치를 조정한다. top, bottom, left, right 적용 불가능하다. - absolute : 절대 좌표 기준으로 위치를 조정한다. top, bottom, left, right 적용 가능하다. - fixed : 스크롤과 무관하게 뷰포트 기준으로 위치 적용 가능하다. 즉, vw와 vh 기준으로 적용된다. - sticky : 부..

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다. 나만의 싸이월드 제작하기 1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기. 1. 싸이월드 전체 구조화하기 나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기 - 구조화한 것을 바탕으로 id 값 지정하기. - background-color 이용하여 원하는 자리에 잘 넣어보기. - flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서..

1. css 웹페이지에서 구조를 담당하고 있는 html의 색, 크기 등의 시각화를 담당한다. 주로 속성과 값으로 이루어져 있다. - 단일 속성 지정 : 1개의 속성과 값의 쌍을 의미한다. - 다중 속성 지정 : 2개 이상의 속성과 값의 쌍을 의미한다. 선택자{ 속성: 값; // 종료를 의미하기 때문에 반드시 적어주기 } css 지정 후 반드시 종료를 표기해야 한다. 아니면 문법적 오류가 뜬다. css 나타내는 방법 3가지 1. html 태그에 css 직접 입력하기 inline style 방식으로 style = "속성 : 값" 으로 표기하기. 유지 보수에 유리하지 않고, 관심사 분리가 안 된다. 즉 같은 언어끼리 묶이지 않고 있다는 의미이다. 2. head 태그 안에 style 태그 입력하기 style t..