# align

0713
Anchor Tag <a>는 하이퍼링크를 만들어주는 태그로 로 활용 문자 외에 이미지도 하이퍼링크 가능 Image Marquee <marquee></marquee>는 글 혹은 이미지를 수평 이동해주는 태그 direction은 이동 방향 의미하며 default는 left이고, bgcolor는 이동 경로 전체의 배경색 Align(정렬) 정렬 특수 기호 & nbsp : 한 칸 띄기 / & copy : © / & lt and & gt : List Ordered List <li> 태그 내부를 1~n의 숫자로 순서를 만드는 리스트 <ol type=”x”>로 순서를 만드는 유형을 달리 하기 가능 x=A : 대문자 알파벳 순 / a : 소문자

TIL 4일차 - [HTML/CSS] Flexbox
학습 목표 레이아웃을 위한 HTML을 만들 수 있다. > o display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. > o > display: flex(속성명:속성값)를 설정하는 이유는 원하고자 하는 영역을 화면상에서 고정이 아니라 > 유연하게 정렬하거나 조절하기 위함이다. 즉, 고정되어 있는 위치를 유연하게 움직이기 위해서 사용한다. > flex의 속성 중 부모 요소에 적용해야 하는 속성이 있고, 자식 요소에 적용해야 하는 속성이 있다. > 이때, display: flex, flex-wrap, flex-direction, justify-content, align-items는 > 부모 요소에 적용해야 자식 요소에 작동한다. 따라서 주고 싶은 태그가 자식이 없는 경우에는 임의로 그 태그를 덮는 부모 태그를 만들어 그 부모 태그에 flex 속성을 적용한다. > 이때, flex-wrap, flex-direction, justif
CSS D01
CSS Casacading Style Sheets HTML 태그에 옷(=디자인)을 입혀주는 기법 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄여준다. 1. HTML문서에 CSS적용하는 방법 CSS는 HTML문서 내의 어느 위치에나 올 수 있지만, 일반적으로 head 태그 안에 위치한다. 2. HTML문서에 CSS를 적용하는 방법 CSS코드를 별도의 외부 소스파일에 작성해 두고 HTML에서 해당 파일을 참조하는 방법 이 방법은 한번 작성한 코드를 여러 페이지에서 재사용 할 수 있다는 장점이 있지만, CSS에 문제가 생길 경우 해당 파일을 참조하는 모든 웹페이지에 문제가 번질 수 있다는 위험도 있다. 3. HTML 태그에 style 속성을 사용하는 방법 이 방법은 세밀한 조정이 가능하다. 전체적으로 소스코드 양이 지나치게 많아지고, 유지보수가 쉽지 않다. 4. CSS코드를 작성하는 기본 형식 -

[iOS] AutoLayout
[패스트캠퍼스] 30개 프로젝트로 배우는 iOS 앱 개발 with Swift 초격차 패키지 Online을 학습하면서 나오는 이론 내용과 공식 문서에서 필요한 내용을 발췌하여 정리한 글입니다. > Part2. Basic 1. 명언 생성기 앱 만들기 AutoLayout >AutoLayout은 제약 조건(Constraints)을 이용해서 뷰의 위치를 지정하는 것이다. (두 View의 사이의 관계를 제약조건을 이용해서 뷰의 크기와 위치를 지정하는 것) 아이폰의 다양한 해상도 비율에 대응하기 위해 나온 개념으로 여러 해상도에서 화면을 똑같이 보여주기 위해 AutoLayout을 사용한다. 세로 보기뿐만 아니라 가로보기 화면도 지원한다. Stroyboard iOS에서 AutoLayout을 이용한 화면 구성은 Storyboard에서 확인할 수 있다. >Xcode File N

flex2
저번 포스트에서 flex에 대해서 부모 요소인 container에 적용할 수 있는 요소들에 대해서 공부했다. 생각해보니 flex를 지금가지 써 오면서 container에만 적용하여 css작업을 했다. 하지만, item에 적용할 수 있는 것들을 공부하면서 정말 유용한게 많다고 생각했으며 삽질의 순간들이 스쳐지나갔다... ㅜ.ㅜ 그럼 item에 적용할 수 있는 요소들에 대해서 살펴보자. > item에 적용하는 것이기 때문에 container가 아닌 class="item"에 적용해야 한다. 🍀 item에 적용할 수 있는 요소 👉🏻 Ⅰ) flex-basis flex-basis는 flex가 적용된 상태에서 item들의 width에 대한 기본 크기를 지정한다. 🤔 왜 flex-basis가 필요할까? > 기본 크기를 설정할 때 width: ??px과 같이 사용을 해 와서 width값을 설정해주면 되는데

SwiftUI Text 양쪽정렬(justify)
swift ui에서 제공하는 Text에서 multi line의 정렬이 leading, center, trailing 세가지 옵션밖에 제공 안하는 문제.. 구글링 결과 비슷한 문제를 겪고있는 사람들이 수년전부터 stack overflow에서 질문을 올리고 있었다. 하지만 대부분의 솔루션은 다음과 같다. "UITextView에서 제공하는 text alignment의 .justify함수를 활용해 양쪽 정렬후, UIViewRepresentable로 감싸 SwiftUI View로써 활용한다" 뭐 대강 이런식. (답변중 아무거나 퍼왔습니다) 하지만 UIViewRepresentable의 특성인지 View의 frame height를 지정해주지 않으면 높이가 자기 멋대로 늘어나고 줄어들고 난리 부

[Flutter]Align 위젯
현재 화면에는 Container위젯이있다. 만약 Container 안에 글자를 넣어야된다면 child: Text("")를 하면 될것이다. 정상적으로 출력된다 하지만 Text를 중앙에 넣고 싶다면? Center()를 쓰면된다. 근데 여기서 나는 우측 아래에다가 Text를 넣어야 한다면? 어떻게 해야할까? 바

CSS align과 unit, viewport
align 요소의 수평 가운데 정렬 방법 margin을 이용 --> margin: auto 속성 부여 (width 속성값 부여) (너비를 제오한 나머지 공간을 좌우로 균등하게 나누어 배치) position을 이용 --> position 부여 후 margin padding 활용 float을 이용한 좌우정렬 예시 예시2 unti and viewport 화면의 크기 단위 px : 화면을 구성하는 단위 --> 필겟ㄹ은 디바이스 해상도에 따라 상대적인 크기를 갖는다

[CSS] 요소를 분석하여 정렬하기
퍼블리싱의 기본은 정렬 아직도 느낌만으로 정렬을 하거나 수 틀리면 플렉스 박스로 만들어버리고 있나요? 이제는 요소를 분석하여 정렬되는 원리와 구조를 이해해봅시다. 1. 수평 정렬(Horizontal Align) 1.1 inline/inline-block 요소 요소의 부모 요소에 text-align: center;를 지정한다. 1.2 block 요소 요소에 너비를 명시적으로 지정하고 { margin : 0 auto }를 지정한다. 정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다. 1.3 복수의 block 요소 복수의 block 요소는 기본적으로 수직 정렬되므로 수평정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정한다. 정렬 대상 요소에 width를 지정하지 않으면
[TIL] flexbox 에서 div 한 개만 우측 정렬하기
아래와 같이 하면 됨. 또 다른 방법으로는 왼쪽에 할 것들을 div 로 한 번 더 싸는 방법 참고: https://stackoverflow.com/questions/35269947/how-can-i-align-one-item-right-with-flexbox https://d2.naver.com/helloworld/8540176

TIL #44 : [CSS] Flex : align-items, align-content
속성은 (justify-content이 main-axis에 정렬하는 것 처럼) flex-container 안에 있는 요소들을 cross axis 따라 정렬한다. 예시: 하지만 는 다중 line에 있는 flexbox을 위한 것이다. 항목이 한줄로 나열된 상태일 때는 아무 효과 없다. 전체 구조물을 정렬하기 때문이다. 예시: 과 를 적용한 예시: --> 첫번째 줄에 있는 박스들이 모두 center 정렬됐다. 
[css] block 혹은 inline-block에서 텍스트 가운데 정렬
html 작성중 나 같은 블럭 레벨 엘리먼트를 많이 사용하게 된다. 블럭 레벨의 텍스트 가운데 정렬을 위해 을 사용해보면 수평방향 정렬을 작동되지만 수직방향은 작동이 안된다. 이는 vertical-align 속성이 inline or table요소에만 적용가능하기 때문이다. 이때 나름의 편법으로 수직정렬이 가능한 방법은 line-height을 블럭 height와 같게 해주면 수직정렬이 가능하다. 이렇게 말이죠! 😃 !codepen[delulu/embed/MWjZVZx?height=404&theme-id=dark&default-tab=css,result]