CSS코드의 재사용 코드 중복의 제거가 필요한 이유 웹페이지마다 동일한 CSS코드를 하나하나 붙여넣고 수정하려면 오래 걸린다. 웹페이지마다 중복 된 태그를 제거해서 관리하는 것이 효율적이다. CSS 코드 중복 된 부분 제거하는 방법(CSS 링크코드) 1. style.css 파일 만들어서 중복된 스타일 코드 붙여 넣기. 2. html파일에 스타일태그 대신 링크코드 넣기. 3. 링크코드를 추가한 HTML파일마다 css문법이 적용되어있다. 코드를 재사용하는 것이 편한 이유 html 코드창의 깔끔해져 가독성이 올라간다. css코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다. 새로운 웹페이지에도 이미 만들어 놓은 css코드를 재사용하기 쉽다. html파일안에 css 직접 놓는 것보다 훨씬 ..
ALL
반응형 디자인(반응형 웹, Responsive Wed) 화면의 크기를 조절하면 그 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는 것. 수많은 형태의 화면에서 동작해야하는 것이 초기 웹의 숙제였고 현재의 해결책이 반응형 디자인이다. Media query 소개 반응형 웹을 만드는 문법. 화면의 크기, 특성에 따라 어떠한 조건을 만족할 때만 css내용이 동작하도록 하는 것. - 최소너비 min-width:000px (screen width > 000px) - 최대너비 max-width:000px (screen width < 000px) - 현재 화면너비 알아보는 법 : 페이지 우클릭 - 검사(단축키 : Ctrl + Shift + I) - 화면 오른쪽 위에 크기표시 CSS CSS..
scanf() 함수 - 콘솔창으로부터 사용자의 입력을 받아오는 함수 #include int main() { int i = 0; scanf("%d", &i); // & : ampersand printf("Value is %d\n", i); return 0; } * 콘솔창에 아무숫자나 입력하면 printf()함수가 출력해준다. * f : formatted의 약자로 형식을 맞춰 나타낸다는 뜻 * 포매팅(formating) : %~, ~ 부분에 뭐가 들어가는지 형식을 지정해주는 것. "%d" : scanf 함수에서는 입력을 어떻게 받을지, printf함수에서는 출력을 어떻게 할지 formating 해주고 있다.입력과 출력을 d(decimal, 10진수)로 받겠다고 포매팅해주고 있다. * &(ampersand) ..
Grid 소개 - 레이아웃 시스템 중 하나 - 두 방향(행과 열) 레이아웃 시스템이로 2차원적이다. - Flex는 1차원적인 한 방향 레이아웃 시스템이다. 최근엔 양 방향을 한 번에 조절 가능한 Grid를 점점 많이 쓰는 추세이긴 하지만 세세한 레이아웃 조절로 복합적인 표현이 가능하고 더 많은 웹브라우저에서 지원하는 건 Flex기 때문에 의도에 맞게 사용하면 된다. - 그리드 사용률 알아보기 1. Can I Use 사이트 : 현재 웹브라우저에서 체택하고 있는 프론트엔드(HTML, CSS, JS) 기술들을 검색하는 사이트 2. 궁금한 기술 검색 후 지원 브라우저 및 전세계 사용률 확인하기 왼쪽은 생활코딩 그리드 강의가 올라온 2017년 결과이고 오른쪽은 2020년 현재 그리드를 검색해본 결과이다. 3년동안..
각 태그들의 부피감 CSS 박스모델 모든 HTML 요소는 상자로 간주 할 수 있습니다. CSS에서 박스모델이란 디자인과 레이아웃을 말할 때 사용합니다. CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다. 여백, 테두리, 패딩 및 실제 콘텐츠로 구성됩니다. 태그라는 같은 문법이지만 웹페이지에서 차지하는 자리가 다른 이유 - block level element (화면 전체를 쓴다.) 제목 태그는 다른 콘텐츠와 같은 라인을 사용하지 않고 줄 바꿈이 된다. - inline element (화면 부분을 쓴다.) 링크태그는 본인 콘텐츠의 크기만큼만 자리를 차지하고 다른 콘텐츠와 같은 라인에 존재한다. - 각 태그의 종류에 따라 특성에 맞게 기본값이 설정 돼있다. 하지만 기본 설정은 'displa..
- 변하는 값인 변수(Variable). 변하지 않는 값인 상수(Constants). - 변수와 리터럴상수 자료형 변수(variable) = 리터럴상수;(literal constant) int angel = 1004; 변수는 어떤 값이 저장 될 수 있는 메모리 공간을 의미한다. 메모리 공간에 담기는 값의 바뀌면 변수의 값도 바뀐다. 반면에 리터럴상수는 문자 그대로의 의미를 갖고 값의 바뀔 수 없다. - 기호적상수와 리터럴상수 한정자(제한자, Qualifier) 자료형 기호적상수(Symbolic constant) = 리터럴상수(literal constant); const int angel = 1004; 자료형과 const라는 키워드를 함께 사용하면 변수의 값을 바꿀 수 없다. 값을 못 바꾸는 변수는..
자료형이 필요한 이유 - 자료형이란 정수인지 실수인지 어떤 종류의 숫자인지 미리 구분해서 알려주는 것이다. - 메모리 사이즈를 어느정도 사용하는지 미리 알려주는 것으로 큰 숫자나 범위가 넓은 숫자를 다룰 때는 메모를 많이 써야한다. - 자료형 종류 int a; short b; char c; double d; float f; 자료형 크기(바이트) 범위 int 4 -2,147,483,648 ~ 2,147,483,647 short 2 -32,768 ~ 32,767 char 1 -128 ~127 ··· ··· ··· ~ ··· - 큰 자료형으로 작은 숫자를 사용하지 않는 이유는? 인공지능 등 복잡한 연산시 데이터 차이로 인한 메모리공간의 소모량이 연산속도에 차이가 나기 때문이다. 그래서 다양한 자료형들이 메모리..
다양한 선택자들 - 태그 선택자 (h1, p, li, a 등 태그들) - 클래스 선택자(.클래스명) 여러 코드에 중복되는 속성을 주고 싶을 때 클래스라는 속성을 사용해서 그룹으로 묶어주면 코드를 한 번만 작성 할 수 있다. 1. class="클래스명" : 묶어주고 싶은 태그에 class속성 써주기. 2. : 선택자 자리에 .클래스명 써주기. 3. class="클래스명 클래스명" : 클래스명을 두 번 써서 이미 묶인 태그를 또 다른 그룹으로도 묶을 수 있다. style 태그 style 속성 Property - 아이디 선택자(#아이디명) 클래스로 묶인 속성들 중 해당 웹페이에서는 다른 속성을 나타내고 싶은 부분은 아이디 속성으로 지정해서 사용 할 수 있다. 1. id="id명" : '이 부분을 이 페이지..
속성을 전부 외우지 않아도 필요한 속성을 검색해서 적용하면 된다. 편집기에서 속성과 속성값을 추천해주기 때문에 정확하게 외우고 있지 않아도 된다. 태그 글씨 크기 변경 'css text size property' 검색 font-size:medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit; font-size:15px | 100%; 태그 정렬 'css text center property' 검색 text-align: left | right | center | justify | initial | inherit;
웹 페이지에 CSS 문법을 포함시키는 법(웹페이지에게 CSS범위 알려주기) 1. style 태그 사용하기 - 웹페이지에서 한 태그와 관련 된 모든 글씨 스타일을 바꾸고 싶을 경우 style 태그를 사용한다. - style태그는 head태그에 포함시킨다. - - 여러가지 효과를 동시에 사용하기 위해서 ;(세미클론)으로 구분 지어준다. 2. style 속성 사용하기 - 웹페이지에서 특정 문장에만 효과를 주고 싶을 경우 style 속성을 사용한다. - - 2가지 이상의 효과를 주고 싶으면 효과 끝에 ;(세미콜론)으로 마무리 해준다. CSS css의 문법 a { color:black; } - Selector : 선택자, 이 웹페이지에서 지정한 모든 태그를 선택한다. (위에서는 'a'가 선택자) - Declar..
