분류 전체보기 260

1. HTML tag, attribute, value, parent etc..

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

10. 웹 표준 검사하기

웹 표준 검사하기 우리가 작성한 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..

Web Frontend/Basic 2021.06.13

9. DOCTYPE ( DTD, 버전 지정 )

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

Web Frontend/Basic 2021.06.10

20. swift change multiple view by segmented control

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

8. 오픈소스 라이선스

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

Web Frontend/Basic 2021.06.08

6. 벡터 이미지 포맷 (SVG)

웹에서 많이 사용되는 벡터 이미지 포맷 (SVG) HTML, XML에서 사용할 수 있는 벡터 포맷이다. 웹에서 사용할 수 있다. 코드와 파일로 저장 되며, 코드를 파일로, 파일을 코드로 바꿀 수도 있다. CSS로 어느정도 Styling이 가능하다. JS로 이미지를 제어할 수 있다. 구글에서 SVG 이미지를 다운 받아 VS Code로 열게 되면 코드가 등장한다. 이 코드를 직접 구현만 하면 실제 이미지를 만들 수도 있다. 하지만 이 코드를 만들기 힘들기에 일러스트와 같은 벡터 이미지 편집 툴을 사용하는 것이다. 그 후 내보내기를 통해 이미지를 받고 코드로 수정을 가능캐 한다.

Web Frontend/Basic 2021.06.06

5. 비트맵 이미지 포맷 (JPG, PNG, GIF)

웹에서 많이 사용되는 비트맵 이미지 포맷 (JPG, PNG, GIF) 이미지가 용량이 커서 용량을 조절해서 사용하고 싶다. —> JPG 이미지가 투명도를 활용해야 한다. —> PNG 이미지가 움짤과 같은 애니메이션 효과가 필요하다 —> GIF 손실압축: 이미지를 손상 시켜 저장을 한다. 이미지의 용량을 획기적으로 줄여서 저장할 수 있다. —> 저장할 때마다 손상 시키기에 원본을 수정하는 것을 추천한다. 표현 색상도: 24비트, 1600만 가지 색상을 지원한다. 압축이 많이 필요할 때 획기적으로 용량을 줄일 수 있는 JPG를 사용한다. 비 손실 압축: 이미지를 손실 시키지 않으며 저장할 수 있다. —> 용량을 획기적으로 줄일 수는 없다. 표현 색상도: 8비트와 24비트 컬러를 선택해서 저장할 수 있다. 가..

Web Frontend/Basic 2021.06.04

4. 이미지에 대한 이해

웹에서 사용하는 이미지: 이미지는 비트맵과 벡터로 구분된다. 비트맵이미지 각 픽셀(화면에 나타나는 하나의 점)이 모여 만들어진 정보의 집합으로 레스터 이미지라고도 부른다. 픽셀단위로 화면에 렌더링(컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 한다.)한다. Jpg, png, gif, web 등은 비트맵 이미지에 해당하며 대부분 비트맵 이미지이다. 벡터이미지 수학적 정보의 형태들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 갖고있다. 그래서 확대, 축소를 하더라도 깨지지 않는다 —> 해상도로부터 자유롭다. 수학적 정보(면과 선)만을 갖고 있어서 확대/축소를 하더라도 용량 변화가 없다. SVG 는 벡터 이미지이다.

Web Frontend/Basic 2021.06.03

2. VS Code Extension

Beautify 코드가 들여쓰기가 지저분해지는 경우가 존재한다. 이를 보완하기 위한 확장 기능이다. 바로가기 키를 설정 해야한다. Beautify file의 경우 파일 전체의 들여쓰기를 수정하기에 원치않는 수정이 일어날 수 있다. Beautify selection 은 선택한 부분만 수정한다. 그래서 Beautify selection 만 단축키를 설정하자. Code -> 기본설정 -> 바로 가기 키 여기서 사용할 수 있는 단축키를 모두 볼 수 있다. Live Server Go Live를 선택하면 출력을 웹에서 바로 확인할 수 있다. 우클릭으로 확인할 수도 있다.

Web Frontend/Basic 2021.06.01

1. 웹 표준과 접근성, 크로스 브라우징

웹 표준(Web Standard): W3C에서 지정한 웹에서 사용되는 표준 기술이나 규칙을 의미 이 표준 기술들을 기준으로 브라우저가 만들어 진다. 하지만, 표준 기술을 해석하는 차이와 새로운 기술삽입으로 조금씩 차이가 생긴다. 대부분의 경우 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술을 표준이라 생각하면 된다. 웹 접근성 모든 사용자들(고령자, 장애인 등)에게 동등한 접근성을 같도록 웹 콘텐츠를 제작하는 방법 —> 영상 자막넣기, 마우스를 사용 못해도 키보드로 제어가능, 이미지에 대체 텍스트를 제공하는 방법 크로스 브라우징 웹을 이용할 수 있게 해주는 프로그램 내가 만든 홈페이지가 각 브라우저에서 동일한 결과물로 출력이 되야하는데 이를 만드는 행위가 크로스 브라우징 이다. 조금은 다르게 구동..

Web Frontend/Basic 2021.05.31