잡코더

Style Tag Style Tag는 CSS 를 html 내부에서 직접 구현 가능캐 하는 tag이다. Style tag에는 type이라는 속성을 추가할 수 있다. Style tag 안에 어떤 타입의 내용을 작성할 것인가를 명시하는 것이다. 그것이 text이고 css이다. 그런데 우리는 왜 계속 명시해 줬지 않았는가? HTML5 부터는 style tag type 부분은 자동으로 명시가 되어있다. Default value에 해당한다. Style tag의 경우 body tag에서 사용해도 같은 결과물을 얻을 수 있다. 하지만, HTML이 브라우저에서 동작하는 프로세스애 대해서 효율적인 방식은 아니다. 작성이 가능하고 오류는 없지만 head tag에 선언하기를 권장한다. Style Tag MDN https://..

Link Tag 외부에서 CSS 파일을 가져와서 연결하는 tag이다. Link 에서는 relationship attribute는 필수 항목이다. Hyper text reference 에는 경로를 지정한다. (필수는 아니다) CSS에서 body seletor에 background를 지정하면 viewport에 해당 색이 칠해진다. Link Tag MDN https://developer.mozilla.org/ko/docs/Web/HTML/Element/link 현재 문서(html)와 외부 리소스(거의 CSS)와의 관계를 명시해서 가져온다. 콘텐츠 범주: Metadata contents 로 head에서 지정하는 것이다. charset은 사용못한다. CORS(Cross Origin Resource Sharing)..

Meta Tag MDN   https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소는 , , , , 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta" data-og-url="https://developer.mozilla.org/ko/docs/Web/HTML/E..

주요범위 HTML, HEAD, BODY, TITLE 이것은 후에 나올 내용을 HTML5 version으로 해석해서 브라우저에 출력을 해달라고 명시를 하는 것이다. HTML Tag HTML tag 는 HTML 문서의 시작과 끝을 범위를 설정해 주는 것이다. html 파일 안에 html tag 안에 있는 것만 파일 파일안에 포함된 영역이라 생각한다. Html 안에는 language 라는 전역 속성이 존재한다. 이 문서가 가질 기본적인 언어를 지정하면 된다. 우리는 국가 표시가 아닌 언어 표시를 하는 것이다. HEAD Tag 문서의 정보에 해당하는 영역이다. Title, meta, style, line tag 를 이용해서 이를 사용할 수 있다. 기타 정보는 meta tag를 이용하며 빈 태그이다. 그래서 / ..

Block & Inline 왜, 어떻게 구분이 되며, 어떻게 바꿔쓸 수 있는지 확인해보자 —> display Body default value를 초기화 하고 span tag를 다음과 같이 지정했다. 그런데 다음과 같이 사용하면 inline element인 span tag가 block element 처럼 사용할 수 있다. Inline tag는 width, height로 수정되지 않는다. 하지만 display를 block로 지정해서 block element로 만들었다. 그럼 다음과 같은 결과가 나온다. 물론 그 반대인 경우도 가능하다. 각 tag들은 default value로 각각에 맞는 block, inline 으로 지정되어 있다. Inline element의 display를 block로 지정하면 bloc..

인라인 요소 span, img 등 특성 1. 필요한 만큼의 너비를 사용한다. 2. 크기를 지정할 수 있다. 3. (width: 0; , height: 0; 로 시작) 4. 수평으로 쌓임 5. Margin, padding 위, 아래는 사용을 할 수 없다. 6. Text를 다루는 용도로 사용 1. 필요한 만큼의 너비를 사용한다. Div tag를 HTML과 CSS에서 span tag로 변경해보자 그럼 화면에 아무것도 나오지 않음을 확인할 수 있다. 그럼 span tag에 “안녕”이라는 content를 넣어서 확인해보자 이렇게 inline element 는 필요한 부분만 공간을 차지한다. 인라인 요소안에 내용을 추가하면 추가한 너비만큼 늘어난다. 2. 크기를 지정할 수 없다. Inline 요소를 width, h..

블록 요소 div, h1, p 특성 1. 사용가능한 최대 가로 너비를 사용한다. 2. 크기를 지정할 수 있다. 3. (width: 100%; , height: 0; 로 시작) 4. 수직으로 쌓임 5. Margin, padding 위, 아래, 좌, 우 사용 가능하다. 6. 레이아웃을 잡는 용도로 사용 1. 사용가능한 최대 가로 너비를 사용한다. 우리가 이전 HTML 기본에서 배운 내용이다. default value는 width는 100%이고, height는 0에서 부터 안의 요소에 따라 증가한다고 했다. HTML에서 content가 비어있는 div를 생성할 경우 결과물이 아무것도 나오지 않는다. 그래서 height를 지정하고 살펴보자! height를 설정해줘서 빨간 네모를 확인할 수 있다. 여기서 브라우져..

완성본: https://heropcode.github.io/GitHub-Responsive/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com HTML 예제: https://yeongwoo-cho.tistory.com/200 5. HTML 예제 우리가 HTML, CSS를 학습하고 만들 페이지이다. 살펴보자!! ..

이력 부산대학교 정보컴퓨터공학과 재학 (2016.03 ~ ) 예비창업패키지 서류합격 ( ~ 2020.04) PNU DSC(부산대 학생 개발자 동아리) 백엔드 개발자(Django): 2기, 3기 활동 (2020.03 ~ 2021.02) BGM(부산 개발자 모임): Django Project Lead 경험 (2020.07 ~ 2020.09) 부산대학교 정보컴퓨터공학과 알고리즘 동아리 알콜 활동 (2020.07 ~ 2021.02) NIA(한국정보화진흥원) 데이터크리에이트 캠프: 우수상 (2020.09 ~ 2020.11) AI, 블록체인 부울경 아이디어 경진대회: 본선진출 (2020.10 ~ 2020.11) 전국 DSC 해커톤 TOP10 수상 (2021.01.30 ~ 2021.02.06) 부산대학교 정보컴퓨터공..

1. Property (크기) —> 요소의 크기, 텍스트의 크기 요소는 네모로 존재한다. 예제 2. Property (여백) —> margin / padding 2-1. margin(요소의 바깥 여백) 요소의 바깥 여백을 지정한다. 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용한다. 1, 2 사이에 거리를 만들 수 있는 margin은 요소의 바깥 여백에 해당한다. 현재 1번 아이템의 영역은 2번 아이템과 만나는 초록색 지점 까지다. margin의 경우 css에서 5가지의 property를 갖는다. 이렇게 개별적으로 조정이 가능하다. 이렇게 개별속성과 단축속성이 존재하며, 단축속성이 있으면 개별 속성이 존재한다. 이런 개념이 없는 경우 그냥 속성이라고 부른다. 예제 2-2. Padd..

Selector(선택자)의 역할?? Selector은 HTML에 CSS를 적용하기 위해 HTML의 특정한 요소를 선택하는 사인이다. Content 이렇게 모든 div에 대해 글자크기 20px, 빨간색을 만든다. 속성(Properties)과 값(Value) 왼쪽은 property, 오른쪽은 Value에 해당한다. HTML의 속성은 attribute, CSS의 속성은 Property 이다. 태그에 직접 작성하는 인라인 선언방식 Style attribute는 CSS를 이곳에서 선언하겠다를 의미한다. 그런데 우리가 배운 선택자라는 개념이 없다. 우리가 만든 속성과 값의 집합인 CSS 내용을 HTML의 어디에 적용하는가에 대한 내용이다. 이미 선택이 된것 이기에 HTML tag에 직접 스타일링을 하기에 선택자가 ..

우리가 HTML, CSS를 학습하고 만들 페이지이다. 살펴보자!! https://heropcode.github.io/GitHub-Responsive/ GitHub: Where the world builds software GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 이 부분은 header에 해당하며 빨간색 네모로 contents 부분이 존재한다. contents는 header..

div tag 명확한 의미를 갖지 않기에 단순히 특정 범위를 묶는(wrap) 용도로 사용된다. —> 나중에 CSS, JS를 이용해서 묶음 단위로 제어가 가능하다!!! img tag (이미지 넣는 태그), 빈태그 html에 이미지를 삽입할 때 사용한다. 웹 페이지에는 이미지를 삽입하는 방식이 크게 2가지로 이루어진다. HTML - img tag를 사용 CSS - background 를 사용 이때 src, alt attribute 두개 모두 필수적으로 명시해야 한다. 정보를 가져오지 못했을때 사용하는 대체 텍스트를 명시하지 않을 경우에도 웹표준에 어긋나 표준 검사기를 이용하면 에러가 발생한다.

Head tag에는 어떠한 정보를 나타내는 지를 알아보자! Title Tag Title tag는 웹 페이지의 제목을 나타내며, 화면에 표시하기 위한 용도가 지정하는 것이 아니라 정보로 표현하는 것이다. 하지만, 지정한 부분이 편의성을 위해 브라우저에서 표시되는 것 뿐이다. Meta Tag (웹 페이지의 정보), 빈 태그 —> title, link, style, script tag에서 나타낼 수 없는 기타 모든 정보를 표시하는 정보 태크이다. 기타 모든 정보를 나타내기에 사용하는 방법이 많지만 대표적인 것만 제시한다. Character set (문자를 인코딩하는 방식)을 UTF-8 로 지정했다. 문자 인코딩?? 우리가 화면에 텍스트를 렌더링(출력) 해야하는데, 그 텍스트가 출력되는 방식을 지정하는 것이다...

HTML 문서의 범위 범위를 나타내는 tag이며 하나씩 존재한다. index.html : index.html 파일의 범위가 html tag 시작과 끝이다. : 정보에 해당하는 부분을 head tag로 정의한다. : 전체 문서의 실제 화면에 출력되는 구조적인 부분은 body tag에 정의한다. Section 안에 제목 tag와 분류하는 div tag Div tag에는 순서가 없는 tag와 순서가 있는 tag가 존재한다.

Tag == element(요소) Attributes & Value —> 기능 확장 Img tag는 어떤 이미지를 삽입할지, 그 이미지는 어디에 존재하는지에 대한 정보를 속성과 값으로 명시해야한다. 그리고 img 태그는 닫힘태그에 /img가 아니다. Source == src : 경로 Alternative == alt : 대체 텍스트 외부적 요인으로 인해 데이터를 못 가져 왔을때 삽입되는 텍스트 (필수) —> 정상적으로 데이터를 가져오면 이 텍스트는 삽입되지 않는다. Division == div : 분할 h는 제목을 의미하고, p 는 문단을, img는 이미지 삽입을 의미한다. 그러나, div tag는 의미를 갖지 않는다. 그런데, 우리는 만드는 사람이고 홍길동이 무슨 의미인지를 알고 있다. 그럼 이 tag..

웹 표준 검사하기 우리가 작성한 HTML 문서가 표준에 부합 하는지 테스트를 해볼 수 있다. Img tag에 src, alt와 같은 필수 속성을 명시하지 않았을때 에러를 검사하는 것이다. W3C validator 에 접속해서 기본적인 검사를 확인할 수 있다. https://validator.w3.org/#validate_by_upload The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. v..

HTML 문서를 시작하는 의 의미는 무엇일까? DOCTYPE(DTD, Document Type Definition) 우리가 만드는 HTML 파일이 브라우저에서 어떠한 버전으로 해석되서 브라우저에 출력 될지를 정의하는 부분이다. 쉽게 설명하면, 윈도우에는 Windows10, 7 등등 버전이 존재한다. 그럼 소프트웨어가 운영체제 위에서 돌아가려면 적합한 버전에서 돌아가야 최적화되게 돌아간다. 배그를 윈도우XP에서 돌아가게 하려면 최적화가 안되겠지~ HTML은 6가지의 버전을 갖는다 (1, 2, 3, 4, X-, 5) 그럼 우리는 HTML 파일이 어떤 버전에 최적화 되어 있는지를 명시 해줘야 한다. 우리가 계속 지정해온 은 해당 html파일이 브라우저에서 현재 표준모드인 html5로 해석되서 출력되어야 한다를..

각 Segment control에 의해 다른 뷰를 보여줘야 하는 경우가 존재한다. View가 비슷한 구조라면 Segment control에 의해 띄우는 데이터를 달리하면 된다. 하지만 다른 View가 등장해야 하면 그에 따른 설정이 필요하다. Storyboard (Home.storyboard) publicViewController에 연결된 UIView이다. 내부에는 View - Segment Control - ContainerView 가 존재한다. 이때, SegmentControl의 index에 의해 ContainerView에 보여질 View를 달리하면 된다. Storyboard (Public.storyboard) 여기에는 두 가지 ViewController가 존재한다. ImmediationViewCon..

오픈소스 라이선스?? 오픈 소스는 전부 무료 사용 소스는 아니다?? 오픈 소스는 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것. 우리가 프로젝트에서 모든 것을 해결할 수는 없다. 그럼 수고와 노력을 덜 수 있는 공개된 소스코드가 사용하는데 이때 코드에는 저작권이 존재한다. 개인적으로, 상업적으로 무료로 사용할 수 있는 오픈소스를 잘 찾아야 한다. 라이선스에 Free라고 되어 있는 경우는 진짜 거의 없다. 그럼 무료로 사용할 수 있는 라이선스를 잘 찾아야 한다. 무료로 사용 가능한 오픈소스 라이선스 Apache License 제일 많이 보게 되는 라이선스 이며, MIT 에서 만들었다. 아래와 같이 개인 소스에 라이선스를 사용한다는 표시만 해주면 된다..