공부노트

1주차 수업 목표1\. 서버와 클라이언트의 역할에 대해 이해한다.2\. HTML,CSS의 기초 지식을 이해하고 부트스트랩을 가져다 쓸 줄 안다.3\. Javascript의 기초 문법을 익힌다.pycharm을 이용하여 html과 css에 대해 알아보았다.html은 뼈대,

''' '''안에 '''''' 는 외부문서를 가져와서 연결할 때 사용한다.대부분 css.rel = Relationship의 약어. 외부문서가 현재 html과 어떤 관계인지 명시하는 속성href = Hyper Text Reference의 약어. 브라우저가 참조할 특정 경

\*이미지 삽입하기body 태그 안에 작성넣을 이미지를 프로젝트 파일 안 images 파일 안에 넣고img를 누르고 tap키를 누르면 기본적인 태그가 완성된다.src 속성 안에 경로를 작성하면 된다../ = 주변./images/imokey.pngalt는 Alterna

\*./ (생략가능)주변에서 찾는 경로. 주변이 누구를 기준으로 하냐는 상대적인 개념. 누구의 주변인지 기준이 상대적으로 바뀔 수 있음.(생략가능)은 ./ 있어도 없어도 주변에서 찾음.\*../상위 폴더로 올라감. 자기가 속해있는 폴더에서 상위폴더로 올라간다.\*htt

를 입력하면 홈페이지에 NAVER 라는 파란색 글씨가 뜨고, 누르면 네이버홈페이지로 이동.a 태그를 입력하면 태그의 href라는 속성에 있는 경로로 페이지를 이동시켜주는 역할.를 입력하면 홈페이지에 추가로 About이라는 글자가 뜨고href 속성에 있는 경로대로 이동,

무언가를 테스트하고 싶을 때 새로운 프로젝트를 다시 만들어서 테스트하기는 너무 번거로우니 그때 사용할 수 있는것이 바로 코드펜이다.링크텍스트html의 윗부분은 작성할 필요 없이 바로 body부분을 작성하면 된다가입하면 테스트한 코드 저장도 가능함.

대부분 브라우저는 기본적으로 요소들이 가지고 있는 css스타일을 가지고 있음.의도하지 않아도 기본 여백이 들어가있음.그 값들은 각각 다르기 때문에 각각 조금 다른 결과물이 출력될 수 있음. 그 브라우저들의 css 스타일을 초기화하고 진행해야함.링크텍스트copy html

간단하게 태그 이름만 작성하고 탭키를 누르면 요소 자동 완성되는 건 emmet이라는 기능의 도움 덕임.코드펜에서도 사용 가능w:200 탭 하면width:200px;자동 완성됨.emmet은 css 선택자를 활용해 사용하는 기능.기호는 곱하기{} 는 내용을 삽입$ 는 순

기본 문법 태그 사이에 내용이 감싸져 있고 이것은 하나의 html코드로 동작하게 됨. 이것을 요소라고 함. 태그 안에 내용까지 요소라고 함. 이것은 하나의 h1 요소 내용을 중심으로 앞태그, 뒷태그로 나위는데 앞은 시작,열린태그라 하고 뒤는 종료, 닫힌 태그

Division의 약어로 블록요소에 해당.특별한 의미가 없는 구분을 위한 요소이다.굉장히 많이 사용되고 있음.Heading의 약어. 블록요소에 해당제목을 의미하는 요소이다.h1~h6까지 있으며 숫자가 작을수록 더 중요한 제목을 정의함.Paragraph의 약어. 블록요소

수정사항이나 설명 등을 작성할 때 사용브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않는다.html css js 전부 주석 표시가 다르기 때문에라는 단축키를 이용해 주석처리 하기.

속성은 열리는 태그에 작성하는 기능 확장해주는 것들.요소들은 자신이 사용할 수 있는 속성이 정해져 있음.전역속성은 body 전체 영역에서 모두 사용할 수 있는 속성을 말함.요소의 정보나 설명을 지정함.요소에 적용할 스타일(css)을 지정class 속성요소를 지칭하는 중

1. 기본문법, 주석 css의 기본 문법은 선택자는 스타일(css)을 적용할 대상(Selector) 선택자를 통해 특정한 요소를 찾으면 거기다가 중괄호 사이에 있는 스타일을 적용해야됨. 선택자{속성은: 값이다;} 예시) div 라는 선택자에 중괄호 사이 fo

css 를 통해 구현할 수 있는 개념들박스모델글꼴, 문자배경배치플렉스(정렬)전환변환띄움애니메이션그리드다단필터

실습을 통해 스타벅스 페이지 만들어 보기.강사님 깃허브에서 이미지를 다운 받고 기본 파일 세팅페이지를 열어보면 상단에 타이틀과 그 옆에 아이콘이 자동으로 삽입되어 있는 것이 보이는데이것은 브라우저에서 자동으로 프로젝트 루트 경로에 favicon을 찾아 페티지 탭의 아이

웹페이지가 소셜 미디어 (카톡, 페이스북) 로 공유될 때 우선적으로 활용되는 정보 지정. url 공유했을 때 사이트 이름, 간단한 정보, 사이트 로고 표시.og:type: 페이지의 유형(E.g, website, video.movie)og:site_name: 속한 사이

css 속성을라고 지정했을 때크롬과 사파리, 서로 다른 브라우저에서 폰트가 다르게 나오는 것을 확인해볼 수 있음.사이트를 만들 때 별도의 서체를 지정하지 않으면 브라우저마다 서체가 다르게 보일 수 있어 정확한 크로스브라우징을 제공할 수 없음.구글에 google font

웹사이트를 만들다보면 이미지나 작은 아이콘들이 디자인 시안과 완벽하게 나오지 않는 경우도 있고, 자주 사용하는 아이콘들을 매번 요청하는 것도 쉽지 않으니 몇가지 자주 사용하는 것들은 구글에서 제공하는 material icons을 사용해 코드를 통해 입력할 수 있음.가끔

html 클래스 속성에 이름을 부여하는 작명법으로두가지 방법이 있는데요소\_\_일부분 Underscore (Lodash) 기호로 요소의 일부분을 표시요소--상태Hyphen (Dash) 기호로 요소의 상태를 표시요소\_\_일부분만약 위에와 같이 html이 작성되었으면클래

html우선 첨부했던 이미지를 div를 통해 그룹으로 묶어주고 class 이름을 fade-in 으로 지정해준다.csscss 에서 visual 의 후손 fade-in class 이름을 가진 요소들을 보이지 않게 opacity를 0으로 지정해준다.jsfadeEls 라는

print()문자열을 출력하는 명령어콤마 , 를 통해서 여러 자료를 출력할 수 있고print를 여러번 사용하면 여러 줄을 출력할 수 있다자료형숫자형숫자로 이루어진 자료형 1,2,3,4.5,6.78문자열문자, 혹은 문자들의 집합으로 " 큰따옴표나 '작은따옴표로 구분'졸리

1. 입력 변수 = input() => 변수에 입력받은 값을 집어넣겠다는 의미 input을 통해 입력되면 문자열로 입력되기 때문에 형 변환이 필요하다. int (integer) = 숫자 정수 folat = 숫자 실수 string = 문자열 list = 리스트

리스트에 자료를 추가할 수도 있고 제거할 수도 있음.append(d) 자료 (d) 를 list 마지막 원소 뒤에 추가함.insert(i,d) 인덱스 (i) 에 자료(d)를 삽입remove(d) 인덱스 0부터 조회해 처음 나오는 자료 d를 제거.sort() 리스트

반복해서 봐도 반복해서 돌아버리게 만드는 반복문. 알아요 저도 제가 멍청이라는 걸....

특정 기능을 수행하는 코드 (들의 모임!)함수이름(인자) 형태로 사용함내장함수 : 파이썬 개발자들이 이미 만들어 둔 함수. 형식에 맞춰 편리하게 사용max() , min()시퀀스의 최댓값, 최솟값을 구하는 함수sum(), len()시퀀스의 합과 길이를 구하는 함수def

기존에 작성해놓은 결과물을 따로 저장할 수 있어야하는데원본 파일 그대로 저장은 매우 부ㄹ편하고 혼자 하는 것이 아닌 여럿이 하면 더 복잡해질 수 있음. 이 때 사용하는 것이 Git Git은 컴퓨터 파일 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기

지속적인 배포란스타벅스예제를 깃허브라는 원격 저장소에 저장을 하고 netlify 에 연결해주면 사이트를 자동으로 만들어줌.컴퓨터 환경에서 스벅을 수정해서 깃허브에 다시 업로드하면 netlify 에서 사이트도 자동으로 업데이트를 해줌.Netlify 가입 진행깃허브로 가입

현재 스벅 예제를 git을 통해 버전관리를 하고 있음. 현재 git init으로 버전관리 하겠다고 선언하고 master 이라는 브랜치로 버전관리 되고 있음 이 master는 하나의 줄기라고 보면 됨. 브랜치는 이 큰 줄기에서 개발하려는 페이지를 가지로 분리해서 개

다른 환경에서 작업하던 내용을 가져오는 방법github 에 로그인오른쪽 상단 사용자 메뉴에서 your repositories 로 이동저장소 페이지로 이동해서 code 버튼 눌러서 저장소 주소 복사바탕화면에 프로젝트 세팅하려고 함.vscode로 넘어감터미널을 켜줌.맥은

변경 사항이 생기면git commit -m'내용'해서 저장을 해주는데git log 로로그를 확인해보면 여태 저장했던 버전들과 어떤 것이 최신 버전인지 확인해볼 수 있음이 때 이전 버전으로 돌아가고 싶으면 git reset --hard HEAD~1reset명령을 추가하고

스벅예제에 수정사항을 만들어 다시 업로드index.html 사진 수정, 저장그러면 옆에 m 이 뜨는데 이건 modified의 약자.index.html이 수정됐다는 의미.수정한 것을 새 버전으로 만들어보려 함.터미널에서git status 엔터 하면아래 빨간글씨로 modi

main (master) : 기본/메인/제품 브랜치dev (develop) : 다음 제품 출시를 위해 여러 기능을 병합하는 브랜치feature/@ : 각 기능 개발을 위한 브랜치release : 이번 제품 출시 직전 최종 테스트(QA)를 위한 브랜치hotfix : 제품

꼭 \`\`\`동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세줄바꿈 처리가 안 됨.띄어쓰기 2번 또는 <br>동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세무궁화 삼천리 화려강산대한 사람 대한 으로 길이 보전하세 \_이텔릭\_ 이텔릭

line-heigth : 줄높이 1배 ; 줄높이 더이상 늘어나지 않는 것으로 하고 필요할 때 추가적으로 조절 word-break : 영어는 단어 단위로 글씨가 줄바꿈 처리가 되는데 한글은 안됨. 단어 단위를 제대로 인식을 못해서 사용해주는 것. keep-all을

수평정렬display : flexalign-items기본값nomal : stretch 높이값 지정 하지 않으면 교차축 최대한 늘어나려고 노력함.아이템들이 수평 가운데 정렬justify-content : center; 아이템들 수평 끝지점 (오른쪽) 정렬justify-c