영최의 개발켈로그

1. transform: 요소의 변환 효과 지정 - 사용 방법: transform: 원근법 이동 크기 회전 기울임 순 2. 2D 변환 함수 * px로 지정 - transform: translate(x,y) - 이동(x축, y축) - transform: translateX(x) - 이동(x축) - transform: translateY(y) - 이동(y축) * 없음(배수) - transform: scale(x,y) - 크기(x축, y축) - (transform: scale(x) - 크기(x축)) - (transform: scale(y) - 크기(y축)) * deg - transform: rotate(degree) - 회전(각도) - (transform: skew(x,y) - 기울임(x축, y축)) - tr..

1. display:flex:수평 정렬하게 한다. 2. flex-direction: 주축을 설정한다. - flex-direction:row - 행축(좌 > 우)로 정렬시킨다. - flex-direction:row-reverse - 행축(우 > 좌)로 정렬시킨다. / 순서가 반전됨 - flex-direction:column - 열축(위 > 아래)로 정렬시킨다. - flex-direction:column-reverse - 열축(아래 > 위)로 정렬시킨다. / 순서가 반전됨 3. flex-wrap: flex items 묶음(줄 바꿈) 여부 - flex-wrap:nowrap - 묶음(줄 바꿈) 없음. - flex-wrap:wrap - 줄바꿈 있음, 여러 줄로 묶음 - (flex-wrap:wrap-reverse ..

단계 번호 제목 코드 1 2557 Hello World print('Hello World!') Hello World!를 화면에 출력하는 문제 (예제 출력과 똑같이 출력해야 합니다.) 2 1000 A+B a, b = map(int,input().split()) print(a+b) 두 수를 입력받고 합을 출력하는 문제 3 1001 A-B a, b = map(int,input().split()) print(a-b) 두 수를 입력받고 뺄셈을 한 결과를 출력하는 문제 4 10998 A×B a, b = map(int,input().split()) print(a*b) 곱셈 문제 5 1008 A/B a, b = map(int,input().split()) print(a/b) 나눗셈 문제. 이 문제에는 "스페셜 저지" ..

선택자 및 테이블을 이용하여 달력 만들기 [내 실습 코드] 2023년 3월 , 달력 만들기1 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 [선생님이 올려주신 정답] 2023년 3월 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

1. CSS 작성법: 선택자 { 프로퍼티 : 값;}을 순서로 작성한다. p { color: red;} ● 선택자: - CSS는 HTML요소의 style을 정의해야 하므로 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다. - 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다. - 선택자로 HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의 가능하다. - 여러개의 프로퍼티를 연속해서 지정할 수 있으며 '세미콜론(;)'으로 구분 한다. p { color: red; padding: 5px;} ● 속성: - 속성(ex, color, padding)은 표준 스펙으로 이미 지정되어 있는 것을 사용하기때문에 사용자가 임의로 정의할 ..

#03_css_work.html 인라인 방식 내장 방식 링크 방식 import방식 내장방식 사용 #03_import.css span { background-color: orange; color: blue; } #03_link.css @import url(./03_import.css); p { background-color: red; color: white; } h3 { background-color: black; color: white; } 직접 css 참조 방식 import 방식을 포함한 4가지를 적용시켜보았다. 실제로 구현해보면서 참조의 우선순위를 확인할 수 있었다. css는 복잡한 코드를 더 간단하게 확인할 수 있게 해주는 것 같다.

CSS(Cascading style sheet)란? : 웹페이지를 디자인하기 위해 사용하는 언어 ● 개발자 도구의 역할? + 웹페이지에서 개발자 도구 확인 방법(맥: option+cmd+i , 윈도우:f12) - 브라우저에서 개발 편의를 위해 제공되는 도구 - 지금 보고 있는 웹페이지의 HTML. CSS. Javascript 등을 볼 수 있음 - 해당 코드를 수정가능 - 특정 요소 코드 확인/ 크기 조정/ 모바일 버전 확인 모두 가능 ● HTML5에서의 스타일 적용 -HTML5 이전 버전에서는 HTML 자체에서 Style을 컨트롤 할 수 있는 태그인 ,등을 사용하였으나 HTML은 '텍스트를 전달하는 문서'이자 '문서의 구조'이므로 즉 본연의 기능이 아닌 디자인 적 요소가 추가되면서 많은 혼란이 야기 되었..

HTML을 Sementic하게 작성해야하는 이유는? ● HTML을 Sementic하게 작성한다는 것의 의미는? : 웹 페이지를 이루는 요소에 '의미와 맞는 태그'를 사용한다는 뜻 ● Sementic tag의 예시? - : 로고, 메뉴아이템 등 - : 다른 곳으로 이동 가능한 링크들 - : 하단 영역 - : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 예를 들면 광고 - : 콘텐츠 영역임을 표시. 한 HTML 페이지 당 한번 사용 - : 하나의 의미있는 요소, 예를 들면 기사 리스트 중 기사 한개 - ~ : 제목 - : article을 포함-그룹화 목적 ● Sementic 해야하는 이유? 1) 검색 최적화 (Search Engine Optimization, SEO): - 검색엔진은 HTML 코드를 분석해..